Я пытаюсь создать страницу HTML с несколькими изображениями на ней. Несколько изображений будут иметь ширину: 100%. Проблема, с которой я столкнулся, заключается в том, что по некоторым причинам некоторые изображения немного перекрывают окно по горизонтали.
Я попытался установить ширину всех изображений: 100%; высота: авто; но он все еще немного переполняет.
Я уверен, что есть способ уместить весь контент в окне без горизонтальной прокрутки, но я не могу понять это. Спасибо за любую помощь.
.banner img{
width: 100%;
height: auto;
}
.banner2 img {
width: 100%;
height: auto;
}
.product-grid {
display: grid;
grid-template-columns: 1fr auto auto 1fr;
}
.item1 {
grid-column: 2/3;
grid-row: 2/3;
width: auto;
}
.item2 {
grid-column: 3/4;
grid-row: 2/3;
width: auto;
}
.item3 {
grid-column: 2/3;
grid-row: 3/4;
width: auto;
}
.item4 {
grid-column: 3/4;
grid-row: 3/4;
width: auto;
}
.item1 .item2 .item3 .item4 img {
width: 50%;
height: auto;
}
.footer img {
width: 100%;
height: auto;
}
<body>
<div class="banner">
<img src="images/banner.jpg" alt="">
</div>
<div class="banner2">
<img src="images/banner2.jpg" alt="">
</div>
<div class="product-grid">
<div class="item1">
<img src="images/item1.jpg" alt="">
</div>
<div class="item2">
<img src="images/item2.jpg" alt="">
</div>
<div class="item3">
<img src="images/item3.jpg" alt="">
</div>
<div class="item4">
<img src="images/item4.jpg" alt="">
</div>
</div>
<div class="footer">
<img src="images/footer.jpg" alt="">
</div>
</body>