CSS 이미지 크기, 채우는 방법, 늘어나지 않는 방법?
이미지가 있는데 특정 너비와 높이(픽셀)를 설정하려고 합니다.
하지만 css를 사용하여 너비와 높이를 설정하면 (width:150px; height:100px), 이미지가 늘어납니다. 보기 흉할 수 있습니다.
CSS를 사용하여 이미지를 신장하지 않고 특정 크기로 채우는 방법은 무엇입니까?
충만 및 신장 이미지의 예:
원본 이미지:
확장된 이미지:
채워진 이미지:
위의 채워진 이미지 예제에서는 먼저 이미지 크기가 150x255(애스펙트 비 유지)로 조정된 다음 150x100으로 잘라집니다.
css 속성을 사용할 수 있습니다. (" 또는 와 같은 대체된 요소의 내용이 컨테이너에 맞게 크기를 조정하는 방법을 설정합니다.")
.cover {
object-fit: cover;
width: 50px;
height: 100px;
}<img src="https://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />IE에는 폴리필이 있습니다. https://github.com/anselmh/object-fit
관련: object-position (상자 내에서 요소 내용의 정렬을 표시합니다.)
이미지를 CSS 배경으로 사용하고 싶다면 우아한 해결책이 있습니다.간단히 사용cover또는contain에서background-sizeCSS3 속성.
.container {
width: 150px;
height: 100px;
background-image: url("https://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}<div class="container"></div>하는 동안에cover확대된 이미지를 제공합니다.contain축소된 이미지를 제공합니다.둘 다 픽셀 가로 세로 비율을 유지합니다.
http://jsfiddle.net/uTHqs/ (표지 사용)
http://jsfiddle.net/HZ2FT/ (포함 사용)
이 접근 방식은 Thomas Fuchs의 빠른 가이드에 따라 Retina 디스플레이에 친숙하다는 장점이 있습니다.
두 특성에 대한 브라우저 지원에서 IE6-8은 제외된다는 점을 언급할 가치가 있습니다.
@afonsoduarte에 의한 승인된 답변의 개선.
부트스트랩을 사용하는 경우
There are three differences:
제공
width:100%유행에 따라
부트스트랩을 사용하고 있으며 이미지가 사용 가능한 모든 너비를 확장하려는 경우에 유용합니다.지정
height속성은 선택 사항입니다. 필요에 따라 제거/보관할 수 있습니다..cover { object-fit: cover; width: 100%; /*height: 300px; optional, you can remove it, but in my case it was good */ }그나저나, 제공할 필요가 없습니다.
height그리고.width의 속성image스타일에 의해 재정의되므로 요소입니다.
그래서 이런 것을 쓰는 것으로 충분합니다.<img class="cover" src="url to img ..." />
유일한 진짜 방법은 이미지 주위에 컨테이너를 두고 사용하는 것입니다.overflow:hidden:
HTML
<div class="container"><img src="ckk.jpg" /></div>
CSS
.container {
width: 300px;
height: 200px;
display: block;
position: relative;
overflow: hidden;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
원하는 것을 하고 이미지를 중앙에 두는 것은 CSS의 골칫거리이며, 다음과 같은 재쿼리에 빠른 수정이 있습니다.
var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight) / 2;
$(".container img").css("margin-top", -gap);
CSS 솔루션 JS 및 배경 이미지 없음:
방법 1 "마진 자동"(IE8+ - NOT FF!):
div{
width:150px;
height:100px;
position:relative;
overflow:hidden;
}
div img{
position:absolute;
top:0;
bottom:0;
margin: auto;
width:100%;
}<p>Original:</p>
<img src="https://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
<p>Wrapped:</p>
<div>
<img src="https://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>방법 2 "변환"(IE9+ ):
div{
width:150px;
height:100px;
position:relative;
overflow:hidden;
}
div img{
position:absolute;
width:100%;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}<p>Original:</p>
<img src="https://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
<p>Wrapped:</p>
<div>
<img src="https://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>http://jsfiddle.net/5xjr05dt/1/
방법 2를 사용하여 고정 너비/높이 용기에서 영상을 중앙에 배치할 수 있습니다.둘 다 오버플로가 발생할 수 있으며 이미지가 용기보다 작은 경우에도 중앙에 배치됩니다.
http://jsfiddle.net/5xjr05dt/3/
방법 3 "더블 래퍼"(IE8+ - NOT FF!):
.outer{
width:150px;
height:100px;
margin: 200px auto; /* just for example */
border: 1px solid red; /* just for example */
/* overflow: hidden; */ /* TURN THIS ON */
position: relative;
}
.inner {
border: 1px solid green; /* just for example */
position: absolute;
top: 0;
bottom: 0;
margin: auto;
display: table;
left: 50%;
}
.inner img {
display: block;
border: 1px solid blue; /* just for example */
position: relative;
right: 50%;
opacity: .5; /* just for example */
}<div class="outer">
<div class="inner">
<img src="https://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>
</div>http://jsfiddle.net/5xjr05dt/5/
방법 4 "더블 래퍼 AND 더블 이미지"( IE8+ ):
.outer{
width:150px;
height:100px;
margin: 200px auto; /* just for example */
border: 1px solid red; /* just for example */
/* overflow: hidden; */ /* TURN THIS ON */
position: relative;
}
.inner {
border: 1px solid green; /* just for example */
position: absolute;
top: 50%;
bottom: 0;
display: table;
left: 50%;
}
.inner .real_image {
display: block;
border: 1px solid blue; /* just for example */
position: absolute;
bottom: 50%;
right: 50%;
opacity: .5; /* just for example */
}
.inner .placeholder_image{
opacity: 0.1; /* should be 0 */
}<div class="outer">
<div class="inner">
<img class="real_image" src="https://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
<img class="placeholder_image" src="https://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>
</div>http://jsfiddle.net/5xjr05dt/26/
- 메소드 1은 약간 더 나은 지원을 제공합니다 - 이미지의 너비 또는 높이를 설정해야 합니다!
- 접두사를 사용하여 method 2는 적절한 지원(ie9 이상)을 제공합니다. - method 2는 Opera mini에서 지원하지 않습니다.
- 방법 3은 두 개의 래퍼를 사용합니다. 너비와 높이가 오버플로될 수 있습니다.
- 메소드 4는 이중 이미지(하나는 자리 표시자로 사용)를 사용하여 대역폭 오버헤드를 추가로 제공하지만 크로스 브라우저 지원이 더욱 향상됩니다.
방법 1 및 3은 Firefox에서 작동하지 않는 것 같습니다.
배경으로 이미지를 필요로 하지 않는 솔루션으로, 잘라내거나 왜곡되지 않고 자동으로 크기가 조정됩니다.
다른 해결책은 원하는 너비와 높이를 가진 용기에 이미지를 넣는 것입니다.이 방법을 사용하면 이미지를 요소의 배경 이미지로 설정할 필요가 없습니다.
그런 다음 이 작업을 수행할 수 있습니다.img요소에 태그를 지정하고 최대 너비와 최대 높이를 설정합니다.
CSS:
.imgContainer {
display: block;
width: 150px;
height: 100px;
}
.imgContainer img {
max-width: 100%;
max-height: 100%;
}
HTML:
<div class='imgContainer'>
<img src='imagesrc.jpg' />
</div>
이제 용기의 크기를 변경하면 이미지가 범위를 벗어나거나 왜곡되지 않고 자동으로 최대한 커집니다.
영상의 중심을 수직 및 수평으로 맞추려면 컨테이너 CSS를 다음으로 변경할 수 있습니다.
.imgContainer {
display: table-cell;
width: 150px;
height: 100px;
text-align: center;
vertical-align: middle;
}
여기 JS Fiddle http://jsfiddle.net/9kUYC/2/ 이 있습니다.
- CSS 배경을 사용하지 않음
- 그것을 자를 수 있는 단 1디브.
- 올바른 가로 세로 비율을 유지하기 위해 최소 너비로 크기 조정됨
- 중앙에서 자르기(수직 및 수평, 상단, 왼쪽 및 변환으로 조정할 수 있음)
테마 같은 것을 사용하는 경우에는 img max-width를 100%로 선언하는 경우가 많습니다.당신은 아무것도 만들지 마.시험해 보세요 :)
https://jsfiddle.net/o63u8sh4/
<p>Original:</p>
<img src="https://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
<p>Wrapped:</p>
<div>
<img src="https://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>
div{
width:150px;
height:100px;
position:relative;
overflow:hidden;
}
div img{
min-width:100%;
min-height:100%;
height:auto;
position:relative;
top:50%;
left:50%;
transform:translateY(-50%) translateX(-50%);
}
jQuery를 사용하여 @Dominic Green의 답변을 바탕으로 한 솔루션이 있습니다. 이미지의 높이보다 크거나 너비보다 높은 이미지에 대해 작동해야 합니다.
자바스크립트를 하는 더 우아한 방법이 있을 수 있지만, 이것은 효과가 있습니다.
function myTest() {
var imgH = $("#my-img").height();
var imgW = $("#my-img").width();
if(imgW > imgH) {
$(".container img").css("height", "100%");
var conWidth = $(".container").width();
var imgWidth = $(".container img").width();
var gap = (imgWidth - conWidth)/2;
$(".container img").css("margin-left", -gap);
} else {
$(".container img").css("width", "100%");
var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight)/2;
$(".container img").css("margin-top", -gap);
}
}
myTest();
StackOverflow 답변을 읽은 후 제가 얻은 간단한 해결책은
.profilePosts div {
background: url("xyz");
background-size: contain;
background-repeat: no-repeat;
width: x;
height: y;
}
저는 Fillmore라는 jQuery 플러그인을 구축하는 것을 도왔습니다. 이 플러그인은background-size: cover그것을 지원하는 브라우저에서 그리고 그렇지 않은 브라우저들을 위한 심이 있습니다.한번 보세요!
이미지를 늘리거나 자르지 않고 특정 크기로 채웁니다.
img{
width:150px; //your requirement size
height:100px; //your requirement size
/*Scale down will take the necessary specified space that is 150px x 100px without stretching the image*/
object-fit:scale-down;
}
다음과 같은 방법을 시도해 보십시오. http://jsfiddle.net/D7E3E/4/
오버플로가 있는 컨테이너 사용: 숨김
편집: @Dominic Green이 저를 이겼습니다.
저는 이 대답이 꽤 늦었다고 생각합니다.어쨌든 이것이 미래에 누군가에게 도움이 되기를 바랍니다.저는 카드를 각도로 배치하는 문제에 직면했습니다.이벤트 배열에 대해 표시되는 카드가 있습니다.이벤트의 이미지 폭이 카드에 비해 큰 경우 양쪽에서 잘라내고 100% 높이로 이미지를 표시해야 합니다.영상 높이가 길면 영상의 하단 부분이 잘리고 너비가 100%입니다.이것에 대한 나의 순수한 CSS 솔루션은 다음과 같습니다.
HTML:
<span class="block clear img-card b-b b-light text-center" [ngStyle]="{'background-image' : 'url('+event.image+')'}"></span>
CSS
.img-card {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
width: 100%;
overflow: hidden;
}
'플렉스' 디스플레이를 통해 이 작업을 수행할 수 있습니다.나를 위해!:
.avatar-img {
display: flex;
justify-content: center;
align-items: stretch;
border-radius: 50%;
border: 1px solid #dee2e6;
height: 5.5rem;
width: 5.5rem;
overflow: hidden;
}
.avatar-img > img {
flex-grow: 1;
object-fit: cover;
}<div>
<div class="avatar-img">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqczw3Fb_TYsj0hbPEy0u7Ay2bVq1KurD6hw&usqp=CAU" alt="Test!'s profile photo">
</div>
<div class="avatar-img">
<img src="https://i.pinimg.com/236x/a1/37/09/a137098873af3bf6180dd24cbe388ae9--flower-iphone-wallpaper-wallpapers-flowers.jpg" alt="Test!'s profile photo">
</div>
</div>이미지를 전체 화면에 맞추려면 다음을 수행합니다.
background-back: 원형;
<div class="container">
<img src="https://i.stack.imgur.com/2OrtT.jpg"/>
</div>
<style>
.container {
width: 150px;
height: 100px;
overflow: hidden;
}
</style>
제가 알기로는 이것을 간단하게 만들 수 있는 플러그인이 있습니다.
jQuery 플러그인:<img>를 배경 스타일로 자동 변환
<img class="fill" src="image.jpg" alt="Fill Image"></img>
<script>
$("img.fill").img2bg();
</script>
게다가, 이 방법은 접근성 요구를 충족시킵니다.이 플러그인은 코드에서 <img> 태그를 제거하지 않으므로 화면 판독기는 ALT 텍스트를 건너뛰는 대신 알려줍니다.
은 야합니다해사를 사용해야 .background-size : cover
제이에스 코드
<div>
<div className={styles.banner}>banner</div>
</div>
css 코드
.banner{
background:
url("./images/home-bg.jpg");
background-size: cover;
height: 53rem;
width: 100%;
}
- 개체 적합이 작동하지 않습니다.
background-size: contain하지 않습니다.
언급URL : https://stackoverflow.com/questions/11757537/css-image-size-how-to-fill-but-not-stretch
'programing' 카테고리의 다른 글
| MySQL: 이번 주 기록을 어떻게 선택합니까? (0) | 2023.08.26 |
|---|---|
| 아무것도 찾을 수 없을 때 예외를 던지지 않는 파이썬용 list.index() 함수 (0) | 2023.08.26 |
| Nib에서 재사용 가능한 UITableViewCell 로드 (0) | 2023.08.26 |
| 원격 레지스트리에서 도커 이미지에 대한 모든 태그를 나열하려면 어떻게 해야 합니까? (0) | 2023.08.26 |
| 콘솔 텍스트의 이전 줄을 수정하는 방법은 무엇입니까? (0) | 2023.08.26 |