4

В процессе верстки столкнулся с такой проблемой: введите сюда описание изображения

По какой-то причине небольшая часть фона обрезается.

Код: Less

	.about-us__information {
		display: flex;
		justify-content: space-between;
		.information__about-us-items {
			padding: 30px 20px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			background: url(../img/item-border.svg);
			background-repeat: no-repeat;
			background-size: cover;
			max-width: 270px;
			.about-us-items__head-line {
				text-align: center;
				h3 {
					color: @blackColor;
					font-size: 2rem;
					font-family: @FfontSans;
					margin: 28px 0px 16px 0px;
				}
			}
			.about-us-items__information {
				p {
					line-height: 25px;
					font-size: 1.4rem;
					color: @grayColor;
					font-family: @FfontSans;
					font-weight: @WfontRegular;
				}
			}
		}
	}
}

Вот свойства, которые отвечают за фон и сами блоки с фонами:

    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: url(../img/item-border.svg);
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 270px;

Пробовал задавать background-position в различных вариациях, ни один из вариантов не дал нужного результата. В чем может быть проблема?

* {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1170px;
	width: 100%;
	margin: 0 auto;
	padding: 0 15px;
}

.item_wrapper {
  display: flex;
  justify-content: space-between;
  
}

.items {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 270px;
  background-image: url(https://svgshare.com/i/6MZ.svg);
  min-height: 270px;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 0 20px;
  
}

Воспроизводимый пример:
<div class="container">
  <div class="item_wrapper">
    <div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, voluptas dicta aut hic dolorum quam ex consequuntur esse vel cum voluptatem tempora expedita molestias optio necessitatibus reiciendis asperiores odio blanditiis!</div>
  <div class="items">Tenetur minus cumque enim est in aliquam quam blanditiis obcaecati quae aut quis, ratione rerum facere accusantium? Quos eum, sequi odit exercitationem beatae iusto fugiat maxime nulla a laboriosam rem!</div>
  <div class="items">Necessitatibus voluptatum quisquam placeat. Provident quo ut autem voluptatibus assumenda odit maxime rerum! Porro vitae omnis nemo eveniet aspernatur, iste veniam placeat repudiandae. Ab exercitationem non eligendi hic doloremque accusantium?</div>
  <div class="items">Id voluptas architecto quisquam nobis. Nisi, dicta, deleniti maxime atque aperiam, fuga reprehenderit cum ex numquam voluptatum totam? Quisquam fugit numquam accusantium temporibus iusto. Vel quasi cupiditate magni excepturi recusandae!</div>
  </div>
</div>

Сниппет: https://codepen.io/anon/pen/BxNpeR

4
  • Уберите justify-content: space-between; ваши блоки сжимаются до возможного минимума и раскидывает по всему родителю
    – Get-Web
    20 апр 2018 в 3:36
  • @МаксимЛенский, начнем с того, что row у родителя блоков, а column у самих блоков для распределения контента по центру. А во вторых фон я нарисовал собственноручно в SVG. У меня не было проблем с созданием этой рамки в SVG у меня была проблема в том, как сделать ее адаптивной.
    – uzi_no_uzi
    20 апр 2018 в 5:22
  • @l2banners, это ничем не помогло, помогает только если убрать max-width, но тогда между блоками нет отступов, т.к. свободного места тоже нет. Делать отступы через margin в данном случаи - плохая идея, ибо это не адаптивно будет.
    – uzi_no_uzi
    20 апр 2018 в 5:25
  • @uzi_no_uzi вы ответ хотите получить ? если да .. то исправьте вопрос таким образом что бы ваш пример воспроизводился а не ваш код less
    – user33274
    20 апр 2018 в 5:33

2 ответа 2

3

Для шрифта я применил размер в vh - т.е высота о viewport Что бы это vh отображался корректно я применил медиа запросы , разумеется что они будут работать для всего документа Как видно(svg из прошлого вашего вопроса)он полностью поместился и весь svg стал резиновым , в медиа запросах изменить flex-wrap:wrap и блоки сделать на 40% от размера родителя

Если в моём ответе что то не корректно или что то я не так понял поясни

 html,body,svg{
  font-size:1.4vw;
}

.item{
  width:300px;
}
.items{
  display:flex;
  align-items:center;
  justify-content: center;
  height:300px;
  width:1005;
}
@media (max-width:1000px){
  html,body,svg{
font-size:1.6vh;
box-sizing:border-box;
  }
  .items{
flex-wrap:wrap;
justify-content: space-around;
align-items:center;

  }
  .item{
width:49%;
  }
}

@media (max-width:480px){
  html,body,svg{
font-size:2vh;
  }
  
  svg{
width:400px;
margin:auto;
  }
  .items{
display:block;
text-align:center;
  }
  .item{
width:90%;
margin:20px auto;
  }
} 

@media (min-width:1000px){
  html,body,svg{
font-size:1.4vh;
  }
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div class="items">

  <div class="item">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 100"> 
    <polygon points="0,0 50,0 65,15 160,15 160,100 0,100" stroke="gray" fill="none" />
    <text x="10" y="30"  fill="gray">&#167;</text>
    <text x="30" y="35"  fill="black">TYPOGRAPHY</text> 
    <g  fill="gray">
      <text x="15" y="50">Lorem ipsum dolor sit,</text>
      <text x="15" y="62">amet consectetur adipisicing </text>
      <text x="15" y="74">adipisicing elit Phasellus </text>
      <text x="15" y="86">tincidunt dignissim nibh</text>
    </g>
  </svg>
  </div>

  <div class="item">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 100"> 
    <polygon points="0,0 50,0 65,15 160,15 160,100 0,100" stroke="gray" fill="none" />
    <text x="10" y="30"  fill="gray">&#167;</text>
    <text x="30" y="35"  fill="black">TYPOGRAPHY</text> 
    <g  fill="gray">
      <text x="15" y="50">Lorem ipsum dolor sit,</text>
      <text x="15" y="62">amet consectetur adipisicing </text>
      <text x="15" y="74">adipisicing elit Phasellus </text>
      <text x="15" y="86">tincidunt dignissim nibh</text>
    </g>
  </svg>
  </div>

  <div class="item">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 100"> 
    <polygon points="0,0 50,0 65,15 160,15 160,100 0,100" stroke="gray" fill="none" />
    <text x="10" y="30"  fill="gray">&#167;</text>
    <text x="30" y="35"  fill="black">TYPOGRAPHY</text> 
    <g  fill="gray">
      <text x="15" y="50">Lorem ipsum dolor sit,</text>
      <text x="15" y="62">amet consectetur adipisicing </text>
      <text x="15" y="74">adipisicing elit Phasellus </text>
      <text x="15" y="86">tincidunt dignissim nibh</text>
    </g>
  </svg>
  </div>

  <div class="item">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 100"> 
    <polygon points="0,0 50,0 65,15 160,15 160,100 0,100" stroke="gray" fill="none" />
    <text x="10" y="30"  fill="gray">&#167;</text>
    <text x="30" y="35"  fill="black">TYPOGRAPHY</text> 
    <g  fill="gray">
      <text x="15" y="50">Lorem ipsum dolor sit,</text>
      <text x="15" y="62">amet consectetur adipisicing </text>
      <text x="15" y="74">adipisicing elit Phasellus </text>
      <text x="15" y="86">tincidunt dignissim nibh</text>
    </g>
  </svg>
  </div>
</div>

Шрифт в сниппете троит , в песочнице работает нормально :https://codepen.io/topicstarter/pen/xjGwEa?editors=1100

2
  • Тут блоки сделаны полностью с помощью SVG, но так не пойдет, т.к. если например нужно будет изменить кол-во контента, то придется в свг добавлять строчками этот код, это как-то некорректно. Через пару часов я добавлю воспроизводимый пример с проблемой.
    – uzi_no_uzi
    20 апр 2018 в 7:13
  • Добавил воспроизводимый пример и сниппет.
    – uzi_no_uzi
    20 апр 2018 в 10:35
0

Решением является background-size: 100% 100%; Нужно растянуть фон по всей ширине и по всей высоте.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.