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 that you have read and understand our privacy policy and code of conduct.

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