https://jsfiddle.net/q97jn9jp/
我有一些图片,但是我不知道它们的宽度或高度。我想让它们的宽度为100%
,但是我希望它们的高度保持自然状态(如果图像高度为100px
,我希望它始终保持100px
)。
这可能吗?
我不想使用JavaScript。
img {
width: 100%;
//height: ???;
}
<img src="https://placehold.it/100x100" alt="">
https://jsfiddle.net/q97jn9jp/
我有一些图片,但是我不知道它们的宽度或高度。我想让它们的宽度为100%
,但是我希望它们的高度保持自然状态(如果图像高度为100px
,我希望它始终保持100px
)。
这可能吗?
我不想使用JavaScript。
img {
width: 100%;
//height: ???;
}
<img src="https://placehold.it/100x100" alt="">
我知道这里的目标是不需要使用图片特定的样式。但如果这个限制仅适用于尺寸,那么这可能会起作用:
.stretchy {
background-image: url(https://placehold.it/100x100);
background-size: 100% 100%;
}
.stretchy img {
display: block; /* eliminates descender space inherent with inline elements */
visibility: hidden;
}
<div class="stretchy">
<img src="https://placehold.it/100x100" alt="">
</div>
编辑
CSS没有提供任何机制来声明图像的自然高度或宽度作为一个值。
如果不使用JavaScript或更改您的标记并按@isherwood建议使用background-image,则无法实现您所要求的操作。
您能够达到的最接近您所要求的是事先知道图像的高度。
img {
width: 100%;
height: 100px;
}
<img src="https://placehold.it/900x100" /><br />
<img src="https://placehold.it/450x100" /><br />
<img src="https://placehold.it/100x100" />
$(function () {
$('img').each(function () {
var $this = $(this),
height = $this.height();
$this.css({
width : "100%",
height: height
});
});
});
/* Ensure images load in natural sizes initially */
img {
width: auto;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://placehold.it/900x100" /><br />
<img src="https://placehold.it/450x100" /><br />
<img src="https://placehold.it/100x100" />
如果没有使用JavaScript,无法保持其高度,同时将宽度设置为100%。
如果您想保持图像的比例,您必须使用:
height: auto;
.image-responsive {
display: block;
height: auto;
max-width: 100%;
}
编辑:抱歉,我在看了这个fiddle之后误读了您不知道高度的问题。我是根据那张图片来判断的。
首先,让我们解释一下%是如何工作的。
当使用%来调整大小时,它将基本上“填充”其容器。您可以通过拖动中间分隔条到不同的大小来查看它的工作原理,就像您提供的fiddle中所示。
在这个fiddle中:https://jsfiddle.net/q97jn9jp/3/
img {
width: 100%;
height: 100px;
}
你可以看到图片的高度保持在100像素,或者是它的自然高度,就像你所解释的那样。而宽度则会拉伸以填满容器的宽度。
同样地,如果你不包括高度,它将随着宽度进行缩放,这就是你在你的fiddle中所经历的情况。
希望这能有所帮助。
<img src="" height="100" />
- Jesse Kernaghan