왜곡없이 이미지를 div에 채우고 채우기

나는 을 거의 계속 해결책으로 생각하지만 실제로는 알 수 없습니다. (참고 - 지금 CSS 학습의 초보 단계입니다.)왜곡없이 이미지를 div에 채우고 채우기

페이지에 넣을 이미지가 하나 있습니다. 가운데 수평/수직. div 컨테이너에서 창 높이와 너비의 80 %입니다. 크기가 가장 작은 쪽을 기준으로 이미지의 높이 또는 너비를 채우기 위해 이미지를 늘려주세요. div

이것은 대부분의 경우 간단하지만 다시 학습 할뿐입니다. 이것에 대한 어떤 방향이라도 훌륭합니다. enter image description here

출처

2013-05-12 user2375438

이 당신이 원하는 대부분의 수행이 http://jsfiddle.net/David_Knowles/ddh2k/

을 시도해보십시오

나는 내가 충분히 설명하고 있지 않다 경우 그림을 만들었습니다. 화면 높이가 이미지의 고유 높이보다 작아지면 실제로 이미지를 사용 가능한 높이의 80 %로 만들려면 자바 스크립트를 추가해야합니다.

<body> 
<div id="container"> 
     <img src="http://dummyimage.com/600x400/000/fff.jpg" alt="apropriate alt text"> 
</div> 
</body> 

html, 
body{ 
    height:100%; 
    width:100%; 
    margin:0; 
    padding:0; 
    background-color: #eee; 
} 
#container{ 
    margin: auto; 
    width:100%; 
    height:100%; 
    text-align:center; 
    font-size:0; 
    white-space:nowrap; 
    background:#aae; 
} 
#container:before{ 
    content:''; 
    display:inline-block; 
    height:100%; 
    vertical-align:middle; 
} 
img { 
    width:80%; 
    height:auto; 
    display:inline-block; 
    vertical-align:middle; 
    background:#fff; 
}

출처

2013-05-12 19:11:43 Timidfriendly

이것은 이미지를 수직 가운데로 가져 오는 데 아무런 도움이되지 않고 이미 시도했던 것과 비슷합니다. 나는 당신이 제공 한 것과 함께 손질을하고, 여전히 거의 같은 결과를 얻습니다. 내가 테스트 한 페이지는 http://modnpop.com/test/에있다. – user2375438

왜곡없이 이미지를 div에 채우고 채우기

답변

관련 문제