Блог

Я пытаюсь сделать так, чтобы все изображения были 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 */
  

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

Спасибо за вашу помощь!

По умолчанию ваши изображения должны иметь ширину родительского элемента, но вы хотите ограничить эту ширину, чтобы она не превышала 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
    }
}