Установить ширину изображения в CSS, но иметь масштаб по высоте с шириной

Question

Установить ширину изображения в CSS, но иметь масштаб по высоте с шириной

0

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

.lead-image img{
 width: 720px;
 }

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

Edit: Я понял это, когда я установил высоту на 100%, чем она работает. благодаря

Greenhoe 14 март 2014, в 20:15

Источник

1

Это должно хорошо масштабироваться в большинстве браузеров. Можете ли вы создать пример jsFiddle?
j08691 14 март 2014, в 18:42
0

.. Вы хотите что-то подобное ..? jsfiddle.net/Z2Emf Также ... просто не устанавливайте высоту изображения ... оставьте это в auto .
Josh Crozier 14 март 2014, в 18:43
0

Похоже, мне нужно было установить высоту на 100% и чем это работает.
Greenhoe 14 март 2014, в 18:45

Показать ещё 1 комментарий

Теги:

html

css

image

3 ответа

0

Установив высоту для автоматического увеличения ширины и масштаба изображения

.lead-image img {
   width: 720px;
   height: auto;
}

Ozan Ceylan 14 март 2014, в 18:19

0

Установив высоту на 100%, а также масштаб. благодаря

Greenhoe 14 март 2014, в 16:47

Ещё вопросы

Это должно хорошо масштабироваться в большинстве браузеров. Можете ли вы создать пример jsFiddle?
.. Вы хотите что-то подобное ..? jsfiddle.net/Z2Emf Также ... просто не устанавливайте высоту изображения ... оставьте это в auto .
Похоже, мне нужно было установить высоту на 100% и чем это работает.

Bess · Accepted Answer · 2014-03-14T16-34-00.000Z

Вероятно, вы хотите установить для вашего обтекающего изображения.lead определенную ширину и высоту, а затем установите стиль img, как показано выше, чтобы:

.lead-image {
    width: 720px;
    height: 300px;
}

.lead-image img {
   width: 100%;
   height: auto;
}

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