CSS 仅在较大时才将图像缩放到父 div，同时使用显式最大宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18113056/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make images scale to parent div only when larger, all while using an explicit max-width
提问by Chris Redford
I can make an image scale responsively to a parent div on smaller screens but still limit to an explicit max width:
我可以在较小的屏幕上响应父 div 的图像缩放，但仍然限制为明确的最大宽度：
img {
max-width: 500px;
width: 100%;
}
However, if the image is smaller than the parent div, it is still stretched to fill the div.
但是，如果图像小于父 div，它仍然会被拉伸以填充 div。
Is there a way to have it scale to 100% only when it is larger and maintain its original dimensions when it is smaller, without knowing the image's dimensions beforehand?
有没有办法让它只有在它变大时才缩放到 100% 并在它变小时保持其原始尺寸，而无需事先知道图像的尺寸？
回答by jerrylow
You can set the image's max-width: 100%; which would limit its size only if it's bigger than its parent.
您可以设置图像的最大宽度：100%；只有当它大于它的父级时，它才会限制它的大小。
img {
height: auto;
max-width: 100%;
}
Demo here: http://jsfiddle.net/LMEwC/
演示在这里：http: //jsfiddle.net/LMEwC/
回答by Manfred
In case you are using Bootstrap (version 3.x, perhaps other versions as well) you can also use
如果您使用的是 Bootstrap（版本 3.x，也可能是其他版本），您还可以使用
class='img-responsive'
on your <img>tag to resize it to the parent element's size.
在您的<img>标签上将其调整为父元素的大小。
回答by Simone Conti
回答by Christopher Marshall
回答by Molle
Use JavaScript to find the respective width/height of picture and div and then resize the image to the fit the div.
使用 JavaScript 找到图片和 div 的相应宽度/高度，然后调整图像大小以适合 div。
You can use this code to find the height, create this function.
您可以使用此代码查找高度，创建此函数。
function getHeight(id)
{
return document.getElementById("id").offsetHeight; // Change to .offsetWidth to gain width :)
}
call the function like this:
像这样调用函数：
function resize()
{
var imgHeight = getHeight("img");
var divHeight = getHeight("div");
//Then ask:
if(imgHeight > divHeight)
{
pic = document.getElementById("img");
pic.style.height = divHeight;
}
}
Now you need some action to call the functions, might work? or some onclick event? Depends on how you are using this image.
现在你需要一些动作来调用函数，可能会起作用吗？或者一些onclick事件？取决于您如何使用此图像。
I hope this helps. It SHOULD do the job.
我希望这有帮助。它应该完成这项工作。
NB: It has come to my attention that used with spesific types of elements Google Chrome simply ignores max/min-width, when width is present (CSS)! But not always.
注意：我注意到，当存在宽度 (CSS) 时，与特定类型的元素一起使用时，Google Chrome 浏览器会简单地忽略最大/最小宽度！但不总是。
