Html 制作图像以适合其父尺寸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15295697/
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 an image to fit its parent dimensions
提问by kfirba
I have some photos which have big sizes, I would like to set them to the Parent's dimension size. If one time the parent dimension is 1200x800, I would like to set the photo dimensions to 1200x800, but also I would like to see the wholeimage. If my parent dimension is 500x300, I would like the image to be 500x300 and so on.
我有一些大尺寸的照片，我想将它们设置为父尺寸。如果一次父尺寸为 1200x800，我想将照片尺寸设置为 1200x800，但我也想查看整个图像。如果我的父尺寸是 500x300，我希望图像是 500x300，依此类推。
Is this even possible? I want to shrink the image or expand it according to it's parent's dimension.
这甚至可能吗？我想缩小图像或根据它的父尺寸来扩展它。
Thanks!
谢谢！
回答by soyuka
The css property that you want is max-width:
您想要的 css 属性是max-width：
Css
css
img {
max-width:100%;
}
You could add a container around your image and set overflow:hiddento prevent images to get bigger than the defined width/height.
您可以在图像周围添加一个容器并设置overflow:hidden为防止图像大于定义的宽度/高度。
回答by Morpheus
Use this bit of css to scale your image:
使用这个 css 来缩放你的图像：
img {
max-width: 100%;
max-height: 100%;
}
回答by Jako
I might be naive, but isn't this as simple as this ?
我可能很天真，但这不是这么简单吗？
img {
width:100%;
height:100%;
}
回答by Adam Brown
Try this in the image tag
在图像标签中试试这个
<img src="url.jpg" width="100%" height="100%" />
Or set the backgound of the element as the image and do the same.
或者将元素的背景设置为图像并执行相同的操作。
回答by Crowlix
try to use the max-width property, this might give a bug in earlier versions IE though
尝试使用 max-width 属性，但这可能会在早期版本的 IE 中产生错误
#custom img {
max-width: 100%;
max-height: 100%;
}
回答by Madzelos
In the case the image is biggerthan the parent container you have to set :
如果图像大于您必须设置的父容器：
img {
max-width: 100%;
}
If your image is smalleryou have to set instead
如果您的图像较小，则必须改为设置
img {
min-width: 100%;
}
otherwise it will just stay at its original width and height.
(the Height is set to autoby default)
否则它只会保持原来的宽度和高度。
（高度默认设置为自动）
