And*_*rew 129
如果仅在图像上定义一个尺寸,则将始终保留图像纵横比.
问题是图像比你更喜欢的更大/更高吗？
您可以将其放在设置为图像所需的最大高度/宽度的DIV中,然后设置overflow:hidden.这会超出你想要的范围.
如果图像宽度为100%且高度为auto,您认为它太高,这是因为保留了纵横比.您需要裁剪或更改宽高比.
请提供一些有关您特别想要完成的内容的更多信息,我会尝试提供更多帮助!
---基于反馈的编辑---
您熟悉max-width和max-height属性吗？你总是可以设置它们.如果不设置任何最小值和您设定的最高高度,然后宽度图像不会失真(宽高比将被保留),它不会比任何一个维度是时间最长,达到其最大的任何较大.
con*_*nca 75
几年后,为了寻找相同的要求,我找到了一个使用background-size的CSS选项.
它应该适用于现代浏览器(IE9 +).
<div id="container" style="background-image:url(myimage.png)">
</div>
风格:
#container
{
width: 100px; /*or 70%, or what you want*/
height: 200px; /*or 70%, or what you want*/
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
参考文献:http://www.w3schools.com/cssref/css3_pr_background-size.asp
和演示:http://www.w3schools.com/cssref/playit.asp？ filename = planicss_background- size
Ada*_*ite 57
通过将CSS max-width属性设置为100%,图像将填充其父级元素的宽度,但不会渲染大于其实际大小的大小,从而保留了分辨率.
设置height属性以auto保持图像的纵横比,使用此技术可以覆盖静态高度,并使图像在所有方向上成比例地弯曲.
img {
max-width: 100%;
height: auto;
}
小智 29
简洁优雅的工作方案:
img {
width: 600px; /*width of parent container*/
height: 350px; /*height of parent container*/
object-fit: contain;
position: relative;
top: 50%;
transform: translateY(-50%);
}
Flo*_*Flo 22
有同样的问题.对我来说问题是高度属性也已在别处定义,修复如下:
.img{
max-width: 100%;
max-height: 100%;
height: inherit !important;
}
简单方案:
min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;
顺便说一下,如果你想把它放在父div容器中,你可以添加那些css属性:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
它应该按预期工作:)
答案之一包括background-size：包含 css语句，我非常喜欢它，因为它是您要执行的操作的直接语句，而浏览器只是执行此操作。
不幸的是，迟早您将需要应用阴影，不幸的是，该阴影无法与背景图像解决方案很好地配合使用。
因此，假设您有一个具有响应能力的容器，但是它具有最小和最大宽度和高度的明确定义的边界。
.photo {
max-width: 150px;
min-width: 75px;
max-height: 150px;
min-height: 75px;
}
并且该容器具有一个img，该img必须注意容器高度的像素，以避免获得非常高的图像，该图像溢出或被裁剪。
img还应该定义最大宽度为100％，以便首先允许呈现较小的宽度，其次基于百分比，从而使其成为参数。
.photo > img {
max-width: 100%;
max-height: 150px;
-webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
-moz-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
box-shadow: 0 0 13px 3px rgba(0,0,0,1);
}
注意它有一个漂亮的阴影;）
在这个小提琴上欣赏一个生动的例子：http : //jsfiddle.net/pligor/gx8qthqL/2/