HTML автоматическое изменение размера изображения с использованием пиксельных и процентных ограничений

Question

Как добавить изображение на HTML-страницу, используя следующие ограничения:

• Не допускается масштабирование (если ширина изображения составляет 400 пикселей, я не хочу изменять его размер до 600).
• Изображение должно быть уменьшено, если содержащий элемент меньше, чем изображение.
• Сохранить соотношение сторон.

Например, у меня есть изображение (400x300).Если содержащий элемент имеет ширину 600 пикселей, я хотел бы показать изображение в формате 400x300.Если содержащий элемент имеет ширину 200 пикселей (например, это мобильный браузер), я хотел бы показать изображение с разрешением 200x150.

Я ищу чистое решение CSS (если это возможно) без жесткого подключенияразмер изображения.

Answer 1

Использование свойства max-width дважды работает правильно:

<div style="max-width: 400px" >
<img src="image.jpg" style="max-width:100%;" />
</div>

Answer 2

Вы должны использовать свойство max-width:

<div style="width:600px">
<img src="images/image.jpg" alt="image" style="max-width:100%;/>    
</div>

Это ограничит ширину вашего изображения родительским элементом div, уменьшив при необходимости масштаб изображения. Он не потеряет свое соотношение сторон и не увеличит масштаб изображения. max-width поддерживается во всех современных браузерах, но не в IE6

Answer 3

Не уменьшает изображение. - asalamon74

Я вставил код AdamY в свой HTML, и он уменьшил изображение. Вот некоторые примеры размеров изображения, которые я получил: 800w x 626h, 962x640, 895x640. Для этих и других он правильно масштабировал их все - после добавления 'style = "max-width: 100%;"' к тегу img изображения помещаются в ширину моего контейнера (# photo-container) и должны масштаб. Не говорю, что это будет работать в вашем коде, но это сработало для меня. Вот мой соответствующий код CSS / HTML:

CSS:

#photo-container {display:block; float:left; width: 800px; 
                    margin-left:5px; margin-top:0px;
                    padding: 10px 10px 10px 10px;
                    background-color:black; color:white;
                    border-bottom-left-radius: 0.5em;
                    border-bottom-right-radius: 0.5em;
                }  

HTML:

    <div id="photo-container">
        <img id="photo-display" src="PlaceHolder" alt="PlaceHolder"  
         style="max-width:100%;">
    </div>

Изображения на самом деле размещены с использованием JavaScript. Процесс выбора в моем коде javascript для этой темы немного многословен, но по сути он равен:

photo-display.src=myimage;

Я не пробовал его с фотографией шириной менее 800.

Answer 4

По тегу без использования блоков div и т. Д.

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

Answer 5

Следует отметить, что для вашего тега IMG необходимо удалить свойство Width & Height, иначе оно не будет масштабироваться должным образом.