Html 使用 CSS 按比例更改图像大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15685666/
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
Changing image sizes proportionally using CSS?
提问by Beaniie
I have been trying for a couple of days now to configure my thumbnail gallery so all the images appear the same height and width. However when I change the Css code to,
我已经尝试了几天来配置我的缩略图库，以便所有图像显示相同的高度和宽度。但是，当我将 CSS 代码更改为
max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;
I get images that are all the same size but the aspect ratio is stretched ruining the images. is there not a way to resize the image container and not the image instead? allowing me to keep the aspect ratio. but resize the image still. (I dont mind if i cut off some of the image.)
我得到的图像大小都相同，但纵横比被拉伸破坏了图像。有没有办法调整图像容器而不是图像的大小？允许我保持纵横比。但仍然调整图像大小。（我不介意我剪掉一些图像。）
Thanks in advance!
提前致谢！
回答by HymanJoe
this is a known problem with CSS resizing, unless all images have the same proportion, you have no way to do this via CSS.
这是 CSS 调整大小的一个已知问题，除非所有图像具有相同的比例，否则您无法通过 CSS 执行此操作。
The best approach would be to have a container, and resize one of the dimensions (always the same) of the images. In my example I resized the width.
最好的方法是拥有一个容器，并调整图像的尺寸之一（始终相同）。在我的示例中，我调整了宽度。
If the container has a specified dimension (in my example the width), when telling the image to have the width at 100%, it will make it the full width of the container. The autoat the height will make the image have the height proportional to the new width.
如果容器具有指定的尺寸（在我的示例中为宽度），当告诉图像宽度为 100% 时，它将使其成为容器的全宽。将auto在高度将会使图像具有高度成正比的新宽度。
Ex:
前任：
HTML:
HTML：
<div class="container">
<img src="something.png" />
</div>
<div class="container">
<img src="something2.png" />
</div>
CSS:
CSS：
.container {
width: 200px;
height: 120px;
}
/* resize images */
.container img {
width: 100%;
height: auto;
}
回答by Nick Andriopoulos
You need to fix one side ( eg height ) and set the other to auto.
您需要固定一侧（例如高度）并将另一侧设置为auto。
Eg
例如
height: 120px;
width: auto;
That would scale the image based on one side only. If you find cropping the image acceptable, you can just set
这将仅基于一侧缩放图像。如果您发现裁剪图像可以接受，则可以设置
overflow: hidden;
to the parent element, which would crop out anything that would otherwise exceed its size.
到父元素，它会裁剪掉任何超出其大小的东西。
回答by dmitry_romanov
You can use object-fitcss3 property, something like
您可以使用object-fitcss3 属性，例如
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<style>
.holder {
display: inline;
}
.holder img {
max-height: 200px;
max-width: 200px;
object-fit: cover;
}
</style>
</head>
<body>
<div class='holder'>
<img src='meld.png'>
</div>
<div class='holder'>
<img src='twiddla.png'>
</div>
<div class='holder'>
<img src='meld.png'>
</div>
</body>
</html>It is not exactly your answer, though, because of it doesn't stretch the container, but it behaves like the gallery and you can keep styling the imgitself.
不过，这不完全是您的答案，因为它不会拉伸容器，但它的行为就像画廊一样，您可以继续对其img自身进行样式设置。
Another drawback of this solution is still a poor support of the css3 property. More details are available here: http://www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/. jQuery solution can be found there as well.
此解决方案的另一个缺点是对 css3 属性的支持仍然很差。此处提供更多详细信息：http: //www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/。jQuery 解决方案也可以在那里找到。
回答by Stanislav
To make images adjustable/flexible you could use this:
要使图像可调整/灵活，您可以使用：
/* fit images to container */
.container img {
max-width: 100%;
height: auto;
}
回答by DickieBoy
Put it as a background on your holder e.g.
把它作为你的持有人的背景，例如
<div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height:120px;">
</div>
This will center your image inside a 120x120 div chopping off any excess of the image
这将使您的图像在 120x120 div 内居中，切掉任何多余的图像
回答by Bhushan Dangore
If you don't want to stretch the image, fit it into div container without overflow and center it by adjusting it's margin if needed.
如果您不想拉伸图像，请将其放入 div 容器中而不会溢出，并在需要时通过调整其边距将其居中。
- The image will not get cropped
- The aspect ratio will also remain the same.
- 图像不会被裁剪
- 纵横比也将保持不变。
HTML:
HTML：
<div id="app">
<div id="container">
<img src="#" alt="something">
</div>
<div id="container">
<img src="#" alt="something">
</div>
<div id="container">
<img src="#" alt="something">
</div>
</div>
CSS:
CSS：
div#container {
height: 200px;
width: 200px;
border: 1px solid black;
margin: 4px;
}
img {
max-width: 100%;
max-height: 100%;
display: block;
margin: 0 auto;
}
回答by reco
if you know the spect ratio you can use padding-bottom with percentage to set the hight depending on with of the diff.
如果您知道宽高比，您可以使用带有百分比的 padding-bottom 来设置取决于差异的高度。
<div>
<div style="padding-bottom: 33%;">
i have 33% height of my parents width
</div>
</div>
