CSS 만 사용하여 왜곡없이 이미지를 유지합니다.

div에 배치 된 이미지가 있습니다. div는 600 너비이며 가변 높이를가집니다.CSS 만 사용하여 왜곡없이 이미지를 유지합니다.

div의 상단에 이미지를 배치하고 싶습니다. 너비를 590으로 설정하면 이미지가 디자인면에서 너무 높고 페이지에서 너무 지배적으로 보입니다 (비율이 대략 4 : 3이기 때문에 문제가됩니다). 내가 사용하는 경우

그래서 나는

.img { 
width: 590px; 
max-height: 200px; 
}

은 ... 다음 이미지는 내가 원하는 방법을 정확하게 DIV 안에 앉아 ... (200) 영상 (590)을 만들고 싶어. 그러나 사진 자체는 590x200 크기로 찌그러지고 왜곡됩니다. 이미지가 그 크기 내에서 작곡되고 왜곡되지 않도록하려면 어떻게해야합니까?

나는 HTML에 액세스 할 수 없으므로 안타깝게도 래퍼를 추가 할 수 없습니다.이 작업은 CSS 클래스 .img를 편집하여 수행해야합니다.

편집 - 앤디가 맞습니다. 부정적인 여백 만 있으면이 작업을 수행 할 수있는 유일한 방법입니다. 고마워, 앤디

출처

2012-11-27 user1325308

용기없이 얻을 수있는 가장 가까운 것은 음수 여백 - 위쪽 및 여백 - 오른쪽 사용 – Andy

이미지를 배경으로 설정할 수 있습니까? 그렇다면 해결책이있을 수 있습니다. –

귀하의 제약 조건을 감안할 때 귀하의 유일한 기회는 ['clip' 속성] (http://reference.sitepoint.com/css/clip)이라고 생각합니다. 불행히도 요소는 절대적으로 배치되어야합니다. – thirtydot

당신은 DIV 배경 이미지 스타일로 이미지를 넣어, 다음 CSS3 스타일을 사용할 수 있습니다 - 배경 - 크기 :

출처

2012-11-27 10:23:04 LorDex

데모를 제공 할 수 있습니까? –

불행히도 div 스타일이나 html을 편집 할 수 없습니다. .img에 대한 CSS에만 액세스 할 수 있습니다 – user1325308

@ user1325308 여기에 분명한 아이디어가 있습니다. 배경 이미지 속성으로 재생 해보십시오. 그 (것)들에있는 많은 잠재력이있다. –

당신은 할 수없는 덮 단순히 CSS를 편집하여. 당신은 내가 배경을 배치 데모에서

CSS를 CSS에서

.cover { 
    width: 590px; 
    height: 200px; 
} 
.video-thumbnail { 
    height: 100%; 
    background-size: cover; 
    -moz-background-size: cover; 
    -webkit-background-size: cover; 
    background-position: center; 
}

DEMO HERE

을 background-size: cover;를 HTML

<div class="cover"> 
    <div style="background-image: url(http://img.youtube.com/vi/6WNyczNYsc0/0.jpg); " class="video-thumbnail"></div> 
</div>

에 배경 이미지로 이미지를 넣어 사용합니다 - 중심 위치.

출처

2012-11-27 10:36:37 Libin

래퍼를 추가 할 수도 없습니다. –

"간단히 CSS를 편집하면 안됩니다."불행히도 나는 당신이 옳다고 생각합니다. HTML에 액세스하여 래퍼를 만들거나 이미지를 배경 이미지로 변경할 수 없습니다. 나는 계속 놀 것이다. 그러나 만일 누군가 누군가 마술을 가지고 있었을 때를 구할 것이라고 생각했다. ... – user1325308

그래. HTML을 편집하지 않으면 다른 모든 솔루션으로 인해 이미지가 왜곡됩니다. – Libin

이 시도 :

.img { 
width: auto; 
max-height: 200px; 
}

경고 : 자동 폭이 IE7에서 작동하지 않습니다 (내가 IE8에 대해 확실하지 않다). 역 호환성을 위해 js 솔루션을 사용해야 할 수도 있습니다.

출처

2012-11-27 10:37:18 LorDex

이미지가 너무 좁습니다. –

CSS 만 사용하여 왜곡없이 이미지를 유지합니다.

답변

관련 문제