Сделайте изображение, соответствующее его родительским измерениям

У меня есть несколько фотографий большого размера, и я хотел бы установить их в размер размера Parent. если один раз родительский размер равен 1200x800, поэтому я хотел бы установить размеры фотографий на 1200x800, но также хотел бы увидеть изображение целое. Если размер моего родителя равен 500x300, я бы хотел, чтобы изображение было 500x300 и т.д.

Возможно ли это? Я хочу сжать изображение или развернуть его в соответствии с его размером родителя.

Спасибо!

Ответы

Ответ 1

Свойство css, которое вы хотите, max-width:

Css

img {
    max-width:100%;
}

Вы можете добавить контейнер вокруг своего изображения и установить overflow:hidden, чтобы изображения не превышали заданную ширину/высоту.

Ответ 2

Используйте этот бит css для масштабирования изображения:

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

Ответ 3

Я мог бы быть наивным, но разве это не так просто?

img {
    width:100%;
    height:100%;
}

Ответ 4

Попробуйте это в теге изображения

<img src="url.jpg" width="100%" height="100%" />

Или установите обратную сторону элемента в качестве изображения и сделайте то же самое.

Ответ 5

попробуйте использовать свойство max-width, это может привести к ошибке в более ранних версиях IE, хотя

#custom img {
    max-width: 100%;
    max-height: 100%;
}