CSS - Отзывчивый размер изображения

Question

Я стараюсь, чтобы все изображения имели max-width: 400px; и в то же время быть отзывчивыми, т.е. мобильным.

Следующее моделирование сделало изображения отзывчивыми, но max-width: 100%; делает изображения различного размера намного больше, чем хотелось бы, поэтому это не подходящее решение.

max-width: 100%; 
Width: auto; 
height: auto; 
border: 1px #DFDFDF solid; /* Just to make the image look nicer */ 

Что мне нужно что-то вдоль этих линий (но реагировать):

max-width: 400px; 
width: auto; 
height: auto; 
border: 1px #DFDFDF solid; /* Just to make the image look nicer */ 

Я пробовал много разных вещей, но я просто не могу заставить его работать.

Благодарим за помощь!

Answer 1

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

max-width: 400px; 
width: 100%; 
height: auto; 
border: 1px #DFDFDF solid; /* Just to make the image look nicer */ 

Чтобы быть немного больше в глубине и иметь больше контроля, вы могли бы разделить это и использовать медиа-запрос для целевого мобильного дисплея:

// Desktop 
.your-img { 
    max-width:400px; 
    width:100%; 
    height:auto; 
    border:1px solid #dfdfdf; 
} 

// Mobile 
@media (max-width:768px) { 
    .your-img { 
     width:auto;  // Get the original width of the image 
     max-width:100%; // So the image can only be as wide as the device max 
     display:block; // Image becomes a block element 
     margin:0 auto; // Centre image if smaller than device width 
    } 
}