Изменение размера изображения не работает в FireFox

У меня есть изображение 1080p, которое я включил в свой код. Код отлично работает в Chrome, однако в Firefox есть проблемы. При высоте изображения firefox не работает, что в конечном итоге делает картинку снимать весь экран.Изменение размера изображения не работает в FireFox

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

Вот код:

#container{ 
    width:auto; 
    height:60%; 
    margin: 0 auto 0 auto; 

} 


#titleImage{ 

     max-width:100%; 
     max-height:90%; 
     width:100%; 
} 


<body> 

    <div id="container"> 
     <img id="titleImage" src="throne.jpg" /> 
    </div>

Я пытаюсь добиться одинаковой высоты для изображения на всех браузерах, как этот site.

С уважением

источник

2013-09-22 Umer Farooq

Пожалуйста, дайте нам пример в jsfiddle или на вашем сервере? –

Сайт, который вы предоставили, использует [CSS Media Queries] (http://css-tricks.com/css-media-queries/). – mdesdev

как высота не работает? Возвращает ли изображение первоначальную высоту? Я не могу воспроизвести вашу проблему. Он работает в этом jsfiddle http://jsfiddle.net/m6VBz/1/ – Chanckjh

Изображение отличается в Firefox, потому что вы установите высоту в процентах. Различные браузеры будут иметь разную высоту браузера даже в полноэкранном режиме из-за GUI вокруг просматриваемой вами страницы (это графический интерфейс пользователя, который показывает вам URL-адрес/избранное/и т. Д.

Вы действительно не должны устанавливать высота в процентах. Попробуйте вместо этого что-то вроде этого

#container{ 
    width: 60%; 
    height: auto; 
    margin: 0 auto; 
}

регулировать ширину, что вы хотите. Использование JSFiddle Chanckjh создано было бы на 70%. как вы можете видеть в обновленном JSFiddle проблема решена между браузерами.

http://jsfiddle.net/m6VBz/19/

Надеюсь, это помогло!

источник

2013-09-22 22:00:58 BlueIceDJ

Изменение размера изображения не работает в FireFox

ответ

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