Правильное размещение изображения с использованием CSS

0

У меня есть изображение. Это изображение должно иметь высоту 100%. Итак, в моем CSS я определил высоту: 100%. Проблема заключается в соответствующей ширине, так как это изображение является панорамой, оно, безусловно, будет превышать размеры видовых экранов. Я не хочу, чтобы это произошло. Есть ли способ переполнения: скрытый, чтобы полностью скрыть часть изображения после максимальной ширины видового экрана.

HTML

<div id="image">
    <img src="http://photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg"/>
</div>

CSS

#image {
    height: 100%;
}

Вот и скрипка. http://jsfiddle.net/AH3Hd/

  • 4
    Не overflow:hidden самом деле работает в #image потому что если я попробую его в скрипке, он будет работать более или менее
  • 0
    Я не пробовал это на тег IMG. я попробовал то же самое на контейнере div для тега.
Теги:

3 ответа

1

Добавьте этот CSS в свой div. Вы должны дать ему ширину, или она будет автоматически настраиваться на все содержимое.

div {
    width:100%;
    overflow:hidden;
}

http://jsfiddle.net/AH3Hd/4/

Поделиться
0

Вы могли бы сделать что-то вроде этого:

#image {
    overflow: hidden;
    height:300px; // Depends on the size you want
    width:300px;
}
#image img{
    height:100%;
}

Здесь скрипка: http://jsfiddle.net/jwvanveelen/AH3Hd/7/

Поделиться
0

Использовать overflow:hidden; , вам нужно указать ширину для div, иначе браузер не будет знать, когда скрыть. Я отредактировал вашу скрипку, чтобы показать, что:

#image {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

http://jsfiddle.net/AH3Hd/6/

Поделиться
  • 0
    Меняет ли это соотношение сторон?
  • 0
    да, это работало на изображении, но переполнение скрыто, не так ли? это привело к появлению горизонтальной полосы прокрутки в браузере.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню