만약 내가 가지고 있다면:
#logo {
width: 400px;
height: 200px;
}
그때
<img id="logo" src="logo.jpg"/>
그 공간을 채우기 위해 늘어납니다. 이미지가 같은 크기로 유지되기를 원하지만 DOM에서 그 정도의 공간을 차지합니다. 캡슐화 <div>
또는 추가해야 <span>
합니까? 스타일링을 위해 마크 업을 추가하는 것이 싫습니다.
답변
예, 캡슐화 div가 필요합니다.
<div id="logo"><img src="logo.jpg"></div>
다음과 같이
#logo { height: 100px; width: 200px; overflow: hidden; }
다른 솔루션 (패딩, 여백)은 더 지루하지만 (이미지의 크기를 기반으로 올바른 값을 계산해야한다는 점에서) 컨테이너가 이미지보다 작을 수 있도록 효과적으로 허용하지 않습니다.
또한 위의 내용은 다른 레이아웃에 대해 훨씬 더 쉽게 적용 할 수 있습니다. 예를 들어 오른쪽 하단에 이미지를 원하는 경우 :
#logo { position: relative; height: 100px; width: 200px; }
#logo img { position: absolute; right: 0; bottom: 0; }
답변
2017 년 답변
CSS 개체 맞춤 은 모든 현재 브라우저에서 작동합니다. 이것은 허용 img
요소 화상 연신없이 크게.
object-fit: cover;
CSS에 추가 할 수 있습니다 .
답변
div의 배경으로 이미지를로드합니다.
대신에:
<img id='logo' src='picture.jpg'>
하다
<div id='logo' style='background:url(picture.jpg)'></div>
모든 브라우저는 맞지 않는 이미지 부분을 자릅니다.
이는 오버플로가 숨겨진 요소를 래핑하는 것보다 몇 가지 장점이 있습니다.
- 추가 마크 업이 없습니다. div는 단순히 img를 대체합니다.
- 이미지를 쉽게 중앙에 배치하거나 다른 오프셋으로 설정할 수 있습니다. 예.
url(pic) center top;
- 충분히 작을 때 이미지를 반복하십시오. (좋아, 왜 그걸 원하는지 모르겠어)
- 동일한 명령문에서 bg 색상을 설정하고 동일한 이미지를 여러 요소에 쉽게 적용하고 bg 이미지에 적용되는 모든 것을 적용하십시오.
업데이트 :이 대답은 개체 맞춤 이전의 것입니다. 이제 아마도 object-fit / object-position을 사용해야합니다.
이전 브라우저, 추가 속성 (예 : background-repeat) 및 엣지 케이스 (예 : 플렉스 박스 및 개체 위치가있는 Chrome 버그 및 그리드 + 자동 높이 + 개체와 관련된 FF (이전?) 문제 해결)에 여전히 유용합니다. 그리드 / 플렉스 박스의 래퍼 div는 종종 직관적이지 않은 결과를 제공합니다.)
답변
CSS3 객체 맞춤
webkit, IE 및 firefox에서 얼마나 멀리 구현되었는지 잘 모르겠습니다. 하지만 오페라는 마법처럼 작동합니다
object-fit
SVG 콘텐츠에서 작동하지만preserveAspectRatio=""
SVG 자체에서 속성 을 설정하여 동일한 효과를 얻을 수도 있습니다 .
img {
height: 100px;
width: 100px;
-o-object-fit: contain;
}
Chris Mills 데모 http://dev.opera.com/articles/view/css3-object-fit-object-position/
답변
#logo {
width: 400px;
height: 200px;
/*Scale down will take the necessary specified space that is 400px x 200px without stretching the image*/
object-fit:scale-down;
}
답변
div를 만들고 수업을 제공하십시오. 그런 다음 그 안에 img를 놓습니다.
<div class="mydiv">
<img src="location/of/your/image" ></img>
</div>
div의 크기를 설정하고 상대적으로 만듭니다.
.mydiv {
position: relative;
height:300px;
width: 100%;
overflow: hidden;
}
그런 다음 이미지 스타일링
img {
width: 100%;
height: auto;
overflow: hidden;
}
도움이되는 희망
답변
다음과 같이 사용할 수 있습니다.
.width100 {
max-width: 100px;
height: 100px;
width: auto;
border: solid red;
}
<img src="https://www.gravatar.com/avatar/dc48e9b92e4210d7a3131b3ef46eb8b1?s=512&d=identicon&r=PG" class="width100" />