1

Всем привет! Верстаю макет и возник следующий вопрос: как расположить 3 квадратных div с background-image в ряд так, чтобы при изменения размера окна браузера они также меняли свои размеры, но оставались квадратами и были расположены в ряд?

Сделал вот так, однако при изменении окна браузера вторая картинка оставляет небольшое место слева от себя.

.wrapper {
    width: calc(100% / 3);
    background-color: aqua;
    float: left;
    }

.imagesLineLINK {
    padding-top: 50%;
    padding-bottom: 50%;
    background-color: #5B0FA1;
    background-image: url(right-arrow.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 13%;
}

.bridgeIMG {
    padding-top: 50%;
    padding-bottom: 50%;
    background-image: url(bridge.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.girlIMG {
    padding-top: 50%;
    padding-bottom: 50%;
    background-image: url(girl.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
<div class="wrapper">
    <div class="imagesLineLINK"></div>
</div>
<div class="wrapper">
    <div class="bridgeIMG"></div>
</div>
<div class="wrapper">
    <div class="girlIMG"></div>
</div>

Как исправить? И есть ли другие варианты?

0

2 ответа 2

1

Примерно так можно реализовать с помощь flexbox

.row{
  display:flex;
  flex-direction:row;
}
.box{
 
  padding:0 15px;
}
.bg_img{
  background: url('http://www.gogetnews.info/uploads/posts/2016-11/1479033917_marsohod-nasa-obnaruzhil-na-krasnoy-planete-nebolshoy-metallicheskiy-shar-foto.jpg');
  width: 200px;
  height:200px;
  background-size:cover;
}
<div class="row">
    <div class="box">
      <div class="bg_img">
      
      </div>
    </div>
    <div class="box">
      <div class="bg_img">
      
      </div>
    </div>
    <div class="box">
      <div class="bg_img">
      
      </div>
    </div>
</div>

5
  • Контролируйте с помощью media запросов чтобы они менялись при маленьких экранах.
    – Bekzod
    5 мар 2018 в 12:11
  • если есть вопросы, задавайте, что-то не совсем я понял
    – Bekzod
    5 мар 2018 в 12:11
  • с media запросами всё ясно - при 640px и меньше картинки будут располагаться друг под другом, растягиваясь на всю ширину окна браузера. Но вторая картинка, как в media, так и без него, слева от себя всё равно оставляет отступ около 1px 5 мар 2018 в 12:15
  • в этом случае они вниз не упадут.
    – Bekzod
    5 мар 2018 в 12:16
  • если вы зададите ширину в 33% классу bg_img то распределится на поровну на 3 части при этом не создавая горизонтальную прокрутку
    – Bekzod
    5 мар 2018 в 12:18
-1

Квадратные блоки можно реализовать используя особенность относительного значения вертикального отступа(вычисляется от ширины родителя).

body{
  margin:0;
}
.image-block{
  box-sizing:border-box;
  width:calc(100% / 3);
  float:left;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  padding-top:calc(100% / 3);
}
.image1{
  background-image:url(https://img1.goodfon.ru/wallpaper/big/1/ca/foto-makro-kartinka-zelenye.jpg)
}
.image2{
  background-image:url(https://kartinki.detki.today/wp-content/uploads/2017/07/kartinka-dlya-detey-popugay.jpg)
}
.image3{
  background-image:url(https://www.sunhome.ru/i/wallpapers/200/planeta-zemlya-kartinka.960x540.jpg)
}
<div class="image-block image1"></div>
<div class="image-block image2"></div>
<div class="image-block image3"></div>

8
  • Почему не флексы?
    – lazyproger
    5 мар 2018 в 12:28
  • @lazyproger , тут и без них можно обойтись. Вообще страницу флексами лучше не перегружать(ресурсоёмкие они). Опять же, некоторые заказчики всё еще требуют IE9.
    – zhurof
    5 мар 2018 в 12:41
  • Можно пожалуйста ссылки про ресурсоёмкость флексов?
    – lazyproger
    5 мар 2018 в 12:56
  • @lazyproger , ссылки ищите сами. Я заметил исходя из практики. Вычисления flex-ов, особенно вложенных друг в друга загружают процессор.
    – zhurof
    5 мар 2018 в 13:00
  • @Геннадий , всё понятно, вроде бы ваш код работает, но зачем вы используете padding-top:calc(100% / 3); ? 5 мар 2018 в 13:05

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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