Всем привет!
Верстаю макет и возник следующий вопрос: как расположить 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>
Как исправить? И есть ли другие варианты?