Блог

Главная - Вопросы по программированию - адаптация изображения к разделению адаптивным способом

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

#javascript #html #css #web-technologies

#javascript #HTML #css #веб-технологии

Вопрос:

Я пытаюсь поместить все изображение в раздел и хочу сделать его адаптивным с помощью медиа-запросов. основная цель состояла в том, чтобы поместить изображение внутри контейнера, не растягивая изображение, и изображение должно быть помещено в тег div. таким образом, даже если мы растянем экран, изображение должно быть отзывчивым в контейнере, и даже если я уменьшу экран, оно должно быть отзывчивым в контейнере.

я пробовал это несколькими способами. мой окончательный код

 .grid-container{
 width: 70%;
 margin: 90px auto;
}

.box {
    height: 200px;
    width: 100%;
    min-height: 200px;
    position: relative;
}
.box1{
    background: transparent url('https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY') no-repeat;
    height: 100%;
    position:relative;
    background-size: cover;
    background-position: center;
}
.box2{
   background: transparent url('https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY') no-repeat;
    opacity: 1;
    background-position:contain; 
    background-repeat:no-repeat; 
   }
.box3{
   background: transparent url('https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY') no-repeat;
    opacity: 1;
    background-position:contain; 
    background-repeat:no-repeat; 
   }
.box4{
   background: transparent url('https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY') no-repeat;
    opacity: 1;
    background-position:contain; 
    background-repeat:no-repeat; 
}
.box5{
background: transparent url('https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY') no-repeat;
    opacity: 1;
    background-position:contain; 
    background-repeat:no-repeat; 
}

.sub-con {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-column-gap: 10px;
 grid-row-gap: 10px;
}
 
@media only screen and (max-width: 1000px) {
 .sub-con {
 grid-template-columns: 1fr 1fr;
 }
}
 
@media only screen and (max-width: 700px) {
 .sub-con {
 grid-template-columns: 1fr;
 }
} 
             <div class="grid-container">
            <div class="sub-con">
            <div class="box1 box"></div>
            <div class="box2 box"></div>
            <div class="box3 box"></div>
            <div class="box4 box"></div>
            <div class="box5 box"></div>
            </div>
            </div>

Ответ №1:

Пожалуйста, попробуйте следующий css

 img {
max-width:100%;
height:auto;

}