스트레칭없이 강제 크기가있는 가운데 이미지

주변 div에서 이미지를 가운데에 배치하고 싶습니다. 이 이미지는 강제 크기이지만 스트레칭을하지 않아야합니다. 따라서 div 컨테이너가 100px * 100px이고 이미지가 200px * 200px 인 경우 각면에 50px가 잘려야합니다.스트레칭없이 강제 크기가있는 가운데 이미지

this question에서 크기 강제 설정 방법을 읽을 수 있습니다. 그러나 이미지를 왼쪽 하단에서 시작하는 것이 아니라 중앙에 배치하는 것이 좋습니다. 내가 원하는 방법

enter image description here

그리고 이것은이다 : 이것은이 얼마나되는 질문 :

입니다

출처

2012-01-04 caw

이미지에 음수의 왼쪽 여백을 지정하십시오. 이 예에서는 margin-left:-50px입니다.

편집 : 또는 이미지 너비를 모르는 경우 이미지를 div의 배경으로 사용할 수 있습니다.

<div style="margin:0 auto; width:100px; height:100px; border:2px solid black; 
    background:url(yourimagehere) 50% 0 no-repeat"> 
</div>

출처

2012-01-04 13:21:44

여백을 설정하면 영상. 이것은 내가 가지고 있지 않은 것입니다. 모든 이미지는 개별적인 크기를 가지고 있습니다. 그리고 여백 값은 모든 단일 이미지에 대해 계산되어야합니다. – caw

흠. 이미지를 div의 배경으로 사용할 수 없습니까? CSS를 사용하면 div 내에서 원하는 위치에 배경을 배치 할 수 있습니다. 잠깐, 내 대답을 편집 할게. –

아, 내 잘못이야. 당신의 대답은 이제 완벽한 것 같습니다. 그러나 그것은 나를 위해 일하지 않습니다 - 그것은 당신에게 모든 정보를주지 않았기 때문입니다. 당신의 대답은 질문에 완벽합니다. 그러나 이미지의 크기가 HTML로 변경되었다는 사실을 잊어 버렸습니다. 실제 너비가 200 인 경우 크기를 조정하는 caw

This 힘 니가 필요한거야?

출처

2012-01-04 13:15:44 Madcowswe

이 속성은 정말 흥미 롭습니다. 감사합니다. 하지만 이미지의 크기를 알아야합니다. – caw

@MarcoW. [this] (http://www.w3schools.com/cssref/playit.asp?filename=playcss_left&preval=-10%25)와 같이 %를 사용해보십시오. – Madcowswe

컨테이너의 방향이 이미지 방향 (세로/가로)과 일치하지 않는 경우에도 작동합니다. zoom(0.1) 및 min-width/height:1000%은 이미지 크기가 대상 컨테이너의 최대 크기의 10 배인 경우 작동한다는 것을 의미하므로 어딘가에서 선을 그려야합니다 (http://jsfiddle.net/FYnCG/). 애니메이션 비트는 테스트에 불과하므로 높이가 제한 요소가 될 때 애니메이션 비트가 어떻게 스케일되는지보십시오.

<DOCTYPE html> 
<html> 
<head> 
<style> 
.container { 
    width: 100px; 
    height: 30px; 
    border: 1px solid black; 
    overflow:hidden; 
    position:relative; 
    transititon: width 5s, height 8s; 
} 
.container img { 
    position: absolute; 
    left:-10000%; right: -10000%; 
    top: -10000%; bottom: -10000%; 
    margin: auto auto; 
    min-width: 1000%; 
    min-height: 1000%; 
    -webkit-transform:scale(0.1); 
    transform: scale(0.1); 
} 
.container:hover { 
    width: 800px; 
    height: 800px; 
    transition: width 5s, height 8s; 
} 
</style> 
</head> 
<body> 
    <div class="container"> 
    <img 
     src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" 
     /> 
    <!-- 366x200 --> 
    </div> 
</body> 
</html>

출처

2014-05-25 18:11:55

스트레칭없이 강제 크기가있는 가운데 이미지

답변

관련 문제