CSS: установите максимальную ширину изображения в его фактическую ширину пикселя

Question

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

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

Есть ли какой-либо CSS, который я могу использовать для описания этого сценария, или мне нужно полагаться на трюки javascript, чтобы установить max-width из фактической ширины изображения после того, как изображение закончит загрузку?

Answer 1

Я думаю, что следующее может работать. Установите max-width: 90% и пусть изображение примет свою естественную ширину (width: auto, значение по умолчанию).

См. Образцы ниже.

Когда размер изображения идентичен ширине содержащего блока (размер экрана), существует конечная точка (угловой корпус). В этом случае изображение будет занимать 90% от ширины родительского блока. Если вам нужно, чтобы это было 100%, вам понадобится jQuery/JavaScript, чтобы позаботиться об исключении.

div { 
 
    border: 1px dotted blue; 
 
    margin: 10px 0; 
 
} 
 
div img { 
 
    max-width: 90%; 
 
    vertical-align: top; /* Removes white space below baseline */ 
 
} 
 
.ex1 { 
 
    width: 500px; 
 
} 
 
.ex2 { 
 
    width: 400px; 
 
} 
 
.ex3 { 
 
    width: 300px; 
 
}

<div class="ex1"> 
 
    <img src="http://placehold.it/400x100"> 
 
</div> 
 
<div class="ex2"> 
 
    <img src="http://placehold.it/400x110"> 
 
</div> 
 
<div class="ex3"> 
 
    <img src="http://placehold.it/400x120"> 
 
</div>