是否存在仅将CSS缩放到边框(保持纵横比)的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缩放到边框(保持纵横比)的css解决方案?如果图像大于容器,则此方法有效:
img {
max-width: 100%;
max-height: 100%;
}
例:
但是我想按比例放大图像,直到尺寸为容器的100%。
Answers:
注意:尽管这是可接受的答案,但如果您可以选择使用背景图片,则以下答案更为准确,并且所有浏览器目前都支持以下答案。
不,没有双向的唯一CSS方式。您可以添加
.fillwidth {
min-width: 100%;
height: auto;
}
对于一个元素,使其始终具有100%的宽度,并自动将其高度缩放为长宽比,或反之:
.fillheight {
min-height: 100%;
width: auto;
}
始终缩放到最大高度和相对宽度。为此,您需要确定纵横比是高于还是低于容器,而CSS无法做到这一点。
原因是CSS不知道页面的外观。它会预先设置规则,但只有在此之后,元素才会被渲染,并且您确切知道要处理的大小和比率。检测到该错误的唯一方法是使用JavaScript。
尽管您不是在寻找JS解决方案,但如果有人需要,我还是会添加一个。用JavaScript处理此问题的最简单方法是根据比率差异添加一个类。如果框的宽高比大于图像的宽高比,请添加类“ fillwidth”,否则添加类“ fillheight”。
感谢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= 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%;
}
<div class=image style="background-image: url('/images/foo.jpg');"></div>
。所有其他样式应与CSS一起使用。
这是我发现的一种骇客解决方案:
#image {
max-width: 10%;
max-height: 10%;
transform: scale(10);
}
这会将图像放大十倍,但将其限制为最终大小的10%-因此将其限制在容器上。
与background-image
解决方案不同,这也适用于<video>
元素。
互动示例:
transform-origin: top left
停止播种。/僵尸
今天,只说对象适合:包含。除了IE之外,支持无所不包:http : //caniuse.com/#feat=object-fit
object-fit
仍在开发中。
object-fit
:stackoverflow.com/a/46456673/474031
的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;*/
}
您可以使用纯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>
没有背景图像且不需要容器的另一种解决方案(尽管必须知道边界框的最大大小):
img{
max-height: 100px;
max-width: 100px;
width: auto; /* These two are added only for clarity, */
height: auto; /* as the default is auto anyway */
}
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>
此示例按比例拉伸图像以适合整个窗口。对上述正确代码的即兴添加$( 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();
});
如果有两个条件。第一个继续检查图像高度是否小于div并应用.fillheight
类,而第二个检查宽度并应用.fillwidth
类。在这两种情况下,使用.removeClass()
这是CSS
.fillwidth {
width: 100%;
max-width: none;
height: auto;
}
.fillheight {
height: 100vh;
max-width: none;
width: auto;
}
如果要在div中拉伸图像,可以替换100vh
为100%
。此示例按比例拉伸图像以适合整个窗口。
您是否要向上缩放而不是向下缩放?
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;
}
但是,这不会锁定宽高比。
我已经使用表格将图片放在框内。它可以保持纵横比并以完全在盒子内的方式缩放图像。如果图像小于方框,则显示为居中。下面的代码使用40px宽度和40px高度框。(不太确定它的效果如何,因为我从另一个更复杂的代码中删除了它并对其进行了一点简化)
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>
最干净,最简单的方法:
首先介绍一些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;
}
HTML:
<div class="image-wrapper">
<img src="yourSource.jpg">
</div>
这应该可以解决问题!
.boundingbox {
width: 400px;
height: 500px;
border: 2px solid #F63;
}
img{
width:400px;
max-height: 500px;
height:auto;
}
我正在编辑答案,以进一步解释我的解决方案,因为我投了反对票。
使用上面在css中所示的样式设置后,现在以下html div将显示图像始终在宽度方向上合适,并将调整高宽比与宽度。因此,图像将按问题要求的比例缩放以适合边界框。
<div class="boundingbox"><img src="image.jpg"/></div>