2015-04-08 3 views
2

Как у меня есть изображение, независимо от портрета или пейзажа:Fit, масштаб и центр изображения ответно в окне браузера (CSS)

  • центрированной ответно как по горизонтали, так и по вертикали (по-прежнему с центром в окне браузера изменяется)
  • занимает фиксированную часть окна браузера, масштабирование ответно
  • сохраняет пропорцию, как окно браузера изменяются

ответ

8

Вот решение, которое удовлетворяет всем выше только основной CSS (без CSS3 не требуется):

http://jsfiddle.net/dvidby0/sytj1uws/1/

HTML

<div class="container"> 
<!-- this is a landscape image--> 
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg"/> 
<!--or use this portrait image; still works 
<img src="http://upload.wikimedia.org/wikipedia/commons/9/9d/Britishblue.jpg"/> 
--> 

CSS

.container { 
width: 80%; 
height: 80%; 
position: absolute;  
margin:auto; 
top:0; 
bottom:0; 
left:0; 
right:0; 
background-color: #aaa; 
} 

img { 
max-width: 100%; 
max-height: 100%; 
position: absolute; 
margin:auto; 
top:0; 
bottom:0; 
left:0; 
right:0; 
} 
Смежные вопросы