Image авто высота масштабируется ширина

У меня есть некоторые изображения, которые меньше по ширине, которые я растянуть ширину, чтобы соответствовать контейнер, однако хотелось бы, hieght для расширения, а также, заранее спасибо, ФилImage авто высота масштабируется ширина

источник

2014-09-04 P Clegg

Вместо подхода css вы можете рассчитать соотношение сторон оригинала, а затем вычислить высоту проецируемого динамически по ширине. – ne1410s

В следующий раз добавьте больше кода. –

Я сделал это с видео с youtube, масштабирует высоту с браузером и шириной. Вы могли бы приспособить его к чему-либо, но может быть немного переборщиком: https://gist.github.com/dcondrey/647fcdda17cd23715872 – davidcondrey

Нет необходимости указывать высоту.

Посмотрите на мой пример, вот мой jsfiddle

http://jsfiddle.net/d575tr49/

Вот это HTML

<div class="ele"> 
    <img src="http://viralstash.net/wp-content/uploads/2014/03/521013543_1385596410.jpg" border="0" /> 
</div>

Вот это CSS

.ele { 
    outline: red solid 1px; 
    width: 250px; 
} 
.ele img { 
    width: 100%; 
    display: block; 
}

Если вы контролируете ширину элемента Parent, только с, вам не нужно будет беспокоиться о значениях ширины и высоты изображения.

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

источник

2014-09-04 21:25:42 Allan

извините, высота изображения по-прежнему не автоматическая калибровка только ширина –

вы проверили мой jsfiddle, его работа там, поиграйте с ним, и вы увидите. Возможно, это что-то с вашим источником. Возможно, вы должны опубликовать css и html, которые у вас есть на jsfiddle. – Allan

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

в вашем css:

img { 
    width: 100%; 
    height: auto !important; 
}

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

источник

2014-09-04 21:11:46

Пробовал этот метод, ширина будет идеально вписываться, но высота не будет масштабироваться, чтобы соответствовать:/thanks. –

Создайте скрипт или код с примером кода, чтобы я мог отлаживать. У вас конфликтующий CSS где-то, потому что это довольно простая вещь CSS. –

Убедитесь, что вы добавили важную декларацию (height: auto! Important;), чтобы обеспечить совместимость между браузерами (особенно старые браузеры, т. Е. 6, 7 и т. Д.). – iammikerodriguez

Image авто высота масштабируется ширина

ответ

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