경계 상자에 맞게 이미지 크기 조정
경계 상자로 이미지를 스케일링하는 CSS 전용 솔루션이 있습니까 (종횡비 유지)? 이미지가 컨테이너보다 큰 경우 작동합니다.
img {
max-width: 100%;
max-height: 100%;
}
예:
- 사용 사례 1 (작동) : http://jsfiddle.net/Jp5AQ/2/
- 사용 사례 2 (작동) : http://jsfiddle.net/Jp5AQ/3/
그러나 치수가 컨테이너의 100 %가 될 때까지 이미지를 확대하고 싶습니다.
- 사용 사례 3 (작동하지 않음) : http://jsfiddle.net/Jp5AQ/4/
참고 :이 답변은 허용되는 답변이지만 아래 답변 이 더 정확하며 배경 이미지를 사용할 수있는 옵션이있는 경우 모든 브라우저에서 현재 지원됩니다.
아니요, CSS를 양방향으로 수행하는 유일한 방법은 없습니다. 당신은 추가 할 수 있습니다
.fillwidth {
min-width: 100%;
height: auto;
}
요소의 너비를 항상 100 %로 설정하고 높이를 가로 / 세로 비율 또는 그 반대로 자동으로 조정합니다 .
.fillheight {
min-height: 100%;
width: auto;
}
항상 최대 높이와 상대 너비로 조정합니다. 두 가지를 모두 수행하려면 종횡비가 컨테이너보다 높거나 낮은 지 확인해야하며 CSS에서이를 수행 할 수 없습니다.
그 이유는 CSS가 페이지의 모양을 모르기 때문입니다. 미리 규칙을 설정하지만 그 후에 만 요소가 렌더링되고 처리하는 크기와 비율을 정확히 알 수 있습니다. 이를 감지하는 유일한 방법은 JavaScript를 사용하는 것입니다.
JS 솔루션을 찾고 있지 않지만 누군가 필요할 경우 추가 할 것입니다. JavaScript로 이것을 처리하는 가장 쉬운 방법은 비율 차이에 따라 클래스를 추가하는 것입니다. 상자의 가로 세로 비율이 이미지의 가로 세로 비율보다 크면 "fillwidth"클래스를 추가하고 그렇지 않으면 "fillheight"클래스를 추가하십시오.
$('div').each(function() {
var fillClass = ($(this).height() > $(this).width())
? 'fillheight'
: 'fillwidth';
$(this).find('img').addClass(fillClass);
});.fillwidth {
width: 100%;
height: auto;
}
.fillheight {
height: 100%;
width: auto;
}
div {
border: 1px solid black;
overflow: hidden;
}
.tower {
width: 100px;
height: 200px;
}
.trailer {
width: 200px;
height: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tower">
<img src="http://placekitten.com/150/150" />
</div>
<div class="trailer">
<img src="http://placekitten.com/150/150" />
</div>CSS3 덕분에 해결책이 있습니다!
용액은 화상을 넣어하는 background-image다음 세트 background-size에contain 입니다.
HTML
<div class='bounding-box'>
</div>
CSS
.bounding-box {
background-image: url(...);
background-repeat: no-repeat;
background-size: contain;
}
여기에서 테스트하십시오. http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain
최신 브라우저와의 완벽한 호환성 : http://caniuse.com/background-img-opts
가운데에 div를 정렬하려면 다음 변형을 사용할 수 있습니다.
.bounding-box {
background-image: url(...);
background-size: contain;
position: absolute;
background-position: center;
background-repeat: no-repeat;
height: 100%;
width: 100%;
}
내가 찾은 해킹 솔루션은 다음과 같습니다.
#image {
max-width: 10%;
max-height: 10%;
transform: scale(10);
}
이미지가 10 배 확대되지만 이미지를 최종 크기의 10 %로 제한하여 컨테이너에 바인딩합니다.
background-image솔루션 과 달리 이것은 <video>요소 와도 작동 합니다.
오늘은 object-fit : contains를 말합니다. IE 이외의 모든 지원 : http://caniuse.com/#feat=object-fit
html :
<div class="container">
<img class="flowerImg" src="flower.jpg">
</div>
CSS :
.container{
width: 100px;
height: 100px;
}
.flowerImg{
width: 100px;
height: 100px;
object-fit: cover;
/*object-fit: contain;
object-fit: scale-down;
object-position: -10% 0;
object-fit: none;
object-fit: fill;*/
}
배경 이미지가없고 컨테이너가 필요없는 다른 솔루션 (경계 상자의 최대 크기를 알아야 함) :
img{
max-height: 100px;
max-width: 100px;
width: auto; /* These two are added only for clarity, */
height: auto; /* as the default is auto anyway */
}
컨테이너를 사용해야하는 경우 최대 너비와 최대 높이를 100 %로 설정할 수 있습니다.
img {
max-height: 100%;
max-width: 100%;
width: auto; /* These two are added only for clarity, */
height: auto; /* as the default is auto anyway */
}
div.container {
width: 100px;
height: 100px;
}
이를 위해 다음과 같은 것이 있습니다.
<table>
<tr>
<td>Lorem</td>
<td>Ipsum<br />dolor</td>
<td>
<div class="container"><img src="image5.png" /></div>
</td>
</tr>
</table>
위쪽으로 확장하지만 아래쪽으로 확장하지 않습니까?
div {
border: solid 1px green;
width: 60px;
height: 70px;
}
div img {
width: 100%;
height: 100%;
min-height: 500px;
min-width: 500px;
outline: solid 1px red;
}
그러나 이것은 종횡비를 잠그지 않습니다.
이 예제는 전체 창에 맞게 이미지를 비례 적으로 늘립니다. 위의 올바른 코드를 즉흥적으로 추가하면$( window ).resize(function(){});
function stretchImg(){
$('div').each(function() {
($(this).height() > $(this).find('img').height())
? $(this).find('img').removeClass('fillwidth').addClass('fillheight')
: '';
($(this).width() > $(this).find('img').width())
? $(this).find('img').removeClass('fillheight').addClass('fillwidth')
: '';
});
}
stretchImg();
$( window ).resize(function() {
strechImg();
});
두 가지 if 조건이 있습니다. 첫 번째는 이미지 높이가 div보다 작은 경우 계속 확인 .fillheight하고 다음은 너비를 확인 하고 적용 하는 동안 클래스를 적용합니다..fillwidth 클래스를 합니다. 두 경우 모두 다른 클래스는.removeClass()
여기 CSS가 있습니다
.fillwidth {
width: 100%;
max-width: none;
height: auto;
}
.fillheight {
height: 100vh;
max-width: none;
width: auto;
}
당신은 대체 할 수 있습니다 100vh에 의해 100%당신이 사업부에서와 이미지를 스트레칭합니다. 이 예제는 전체 창에 맞게 이미지를 비례 적으로 늘립니다.
동일한 세로로 세로 세로 이미지와 가로 세로 이미지 모두에 대해 순수한 CSS를 사용하여이 작업을 수행 할 수 있습니다.
다음은 Chrome, Firefox 및 Safari에서 작동하는 스 니펫입니다 (둘 다 사용 object-fit: scale-down하고 사용하지 않음).
figure {
margin: 0;
}
.container {
display: table-cell;
vertical-align: middle;
width: 80px;
height: 80px;
border: 1px solid #aaa;
}
.container_image {
display: block;
max-width: 100%;
max-height: 100%;
margin-left: auto;
margin-right: auto;
}
.container2_image2 {
width: 80px;
height: 80px;
object-fit: scale-down;
border: 1px solid #aaa;
}Without `object-fit: scale-down`:
<br>
<br>
<figure class="container">
<img class="container_image" src="https://i.imgur.com/EQgexUd.jpg">
</figure>
<br>
<figure class="container">
<img class="container_image" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>
<br> Using `object-fit: scale-down`:
<br>
<br>
<figure>
<img class="container2_image2" src="https://i.imgur.com/EQgexUd.jpg">
</figure>
<br>
<figure>
<img class="container2_image2" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>I have used table to center image inside the box. It keeps aspect ratio and scales image in a way that is totally inside the box. If the image is smaller than the box then it is shown as it is in the center. Below code uses 40px width and 40px height box. (Not quite sure how well it works because I removed it from another more complex code and simplified it little bit)
CSS:
.SmallThumbnailContainer
{
display: inline-block; position: relative;
float: left;
width: 40px;
height: 40px;
border: 1px solid #ccc;
margin: 0px; padding: 0px;
}
.SmallThumbnailContainer { width: 40px; margin: 0px 10px 0px 0px; }
.SmallThumbnailContainer tr { height: 40px; text-align: center; }
.SmallThumbnailContainer tr td { vertical-align: middle; position: relative; width: 40px; }
.SmallThumbnailContainer tr td img { overflow: hidden; max-height: 40px; max-width: 40px; vertical-align: middle; margin: -1px -1px 1px -1px; }
HTML:
<table class="SmallThumbnailContainer" cellpadding="0" cellspacing="0">
<tr><td>
<img src="thumbnail.jpg" alt="alternative text"/>
</td></tr>
</table>
The cleanest and simplest way to do this:
First some CSS:
div.image-wrapper {
height: 230px; /* Suggestive number; pick your own height as desired */
position: relative;
overflow: hidden; /* This will do the magic */
width: 300px; /* Pick an appropriate width as desired, unless you already use a grid, in that case use 100% */
}
img {
width: 100%;
position: absolute;
left: 0;
top: 0;
height: auto;
}
The HTML:
<div class="image-wrapper">
<img src="yourSource.jpg">
</div>
This should do the trick!
This helped me:
.img-class {
width: <img width>;
height: <img height>;
content: url('/path/to/img.png');
}
Then on the element (you can use javascript or media queries to add responsiveness):
<div class='img-class' style='transform: scale(X);'></div>
Hope this helps!
.boundingbox {
width: 400px;
height: 500px;
border: 2px solid #F63;
}
img{
width:400px;
max-height: 500px;
height:auto;
}
I'm editing my answer to further explain my soluton as I've got a down vote.
With the styles set as shown above in css, now the following html div will show the image always fit width wise and will adjust hight aspect ratio to width. Thus image will scale to fit a bounding box as asked in the question.
<div class="boundingbox"><img src="image.jpg"/></div>
참고URL : https://stackoverflow.com/questions/9994493/scale-image-to-fit-a-bounding-box
'Programming' 카테고리의 다른 글
| 부트 스트랩 : 컨테이너의 너비를 어떻게 변경합니까? (0) | 2020.08.06 |
|---|---|
| 스레드 안전 사전을 구현하는 가장 좋은 방법은 무엇입니까? (0) | 2020.08.06 |
| iOS에서 ISO 8601 날짜를 얻으려면 어떻게합니까? (0) | 2020.08.06 |
| 다음 기능을 표현합니다. 실제로 무엇을위한 것입니까? (0) | 2020.08.06 |
| java.sql.SQLException :-ORA-01000 : 최대 열린 커서가 초과되었습니다 (0) | 2020.08.06 |