Image Set Width Height Attributes в HTML, Set Width 100% в CSS

У меня есть изображение, размер которого я знаю.Image Set Width Height Attributes в HTML, Set Width 100% в CSS

<img class="example" src="img.jpg" width="1024" height="768" />

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

Однако, я также хочу, чтобы изображение имело width: 100%. Есть ли способ достичь этого с помощью CSS?

Я попытался

.example { 
    width: 100%; 
    height: auto; 
}

Однако, это игнорирует пропорции я указанный в HTML. Есть ли способ использовать атрибуты ширины и высоты, определенные в HTML, чтобы сохранить соотношение сторон, но имеет ли изображение width: 100% (т. Е. Ширина родителя)?

Я не хочу использовать JS для достижения этого, я не хочу жестко кодировать пропорции в CSS, и я бы предпочел не делать никаких маркеров/дополнений для этого.

Редактировать

Действительно, я просто увидеть, если есть лучший способ сделать это, чем это,

https://jsfiddle.net/s6gkonbh/

источник

2016-06-08 Jacob Parker

Вы не можете установить ширина и высота от css. вам нужно установить его в строке. –

Вы можете установить ширину img 100%, но там, где вы этого действительно хотите. Вы хотите установить его ширину и высоту автоматически для некоторого div или на видовом экране, где? Я этого не понимал. – frnt

Вы можете использовать прокладку нижнего слоя, если вы знаете соотношение изображения заранее. –

Привет, пожалуйста, попробуйте это удалить высоту и ширину от IMG тег

<img class="example" src="img.jpg" />

и CSS

.example { 
    width: 100% !important; 
    height: 100% !important; 
}

источник

2016-06-08 08:51:03

Это установит высоту на 100% от родительского. –

Единственный способ - использовать javascript. Просто установите ширину 100% в css, затем с javascript получите ширину imatge умножить на соотношение сторон, чтобы получить желаемую высоту.

источник

2016-06-08 08:51:59

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

и установите ширину изображения на 100%, и она будет занимать высоту в соответствии с соотношением сторон. Просто установите цвет фона вашего родительского div на белый или что-то, что можно смешать с фоном.

JSFiddle Demo

HTML:

<div style="width:500px; height:300px; background-color:yellow"> 
    <img class="example" src="http://www.finnchat.com/app/uploads/2015/10/Blogi44_metakuva.jpg" width="100%" /> 
</div>

NB: изображения авторские права принадлежат соответствующим владельцам.

источник

2016-06-08 09:00:45 Himanshu

Image Set Width Height Attributes в HTML, Set Width 100% в CSS

ответ

Смежные вопросы