使用 CSS 按比例更改图像大小
[英]Changing image sizes proportionally using CSS
问题描述
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 don't mind if I cut off some of the image.) （我不介意我剪掉一些图像。）
10 个解决方案
解决方案1
197 已采纳 2013-03-28 15:27:23
This is a known problem with CSS resizing.这是 CSS 调整大小的已知问题。 Unless all images have the same proportion, you have no way to do this via 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.如果容器具有指定的尺寸（在我的示例中为宽度），当告诉图像宽度为 100% 时，它将使其成为容器的全宽。 The auto at the height will make the image have the height proportional to the new width.高度处的auto将使图像具有与新宽度成比例的高度。
Example:例子：
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;
}
解决方案2
44 2013-03-28 15:23:32
You need to fix one side (for example, height) and set the other to auto .您需要固定一侧（例如，高度）并将另一侧设置为auto 。
For example,例如，
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.到父元素，它会裁剪掉任何超出其大小的东西。
解决方案3
27 2013-07-08 05:23:26
You can use the object-fit CSS 3 property.您可以使用object-fit CSS 3 属性。 Something like:就像是：
<!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 it doesn't stretch the container.但是，这不完全是您的答案，因为它不会拉伸容器。 But it behaves like the gallery and you can keep styling the img itself.但它的行为就像画廊一样，您可以继续为img本身设置样式。
Another drawback of this solution is still a poor support of the CSS 3 property.此解决方案的另一个缺点是对 CSS 3 属性的支持仍然很差。 More details are available here: CSS 3 Object-fit Polyfill .此处提供更多详细信息： CSS 3 Object-fit Polyfill 。 A jQuery solution can be found there as well.也可以在那里找到 jQuery 解决方案。
解决方案4
9 2014-04-30 17:08:09
To make images adjustable/flexible you could use this:要使图像可调整/灵活，您可以使用：
/* fit images to container */
.container img {
max-width: 100%;
height: auto;
}
解决方案5
5 2013-03-28 15:27:39
Put it as a background on your holder eg把它作为你的持有人的背景，例如
<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 内居中，切掉任何多余的图像
解决方案6
4 2020-03-13 21:31:52
If you don't want to stretch the image, fit it into a div container without overflow and center it by adjusting its 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;
}
解决方案7
3 2020-08-12 20:49:40
解决方案8
1 2020-09-21 17:33:14
This helps me to make the image 150% with ease.这有助于我轻松地将图像制作 150%。
.img-popup img {
transform: scale(1.5);
}
解决方案9
0 2022-04-22 20:00:55
Now this should be more as a last resort, but you could simply do math.现在这应该更多地作为最后的手段，但你可以简单地做数学。 For example, lets say that you have an image with a width of 595 and height of 300. You would create a unit rate by doing 300/595 = 0.504.例如，假设您有一张宽度为 595 且高度为 300 的图像。您可以通过执行 300/595 = 0.504 来创建单位比率。 Then, you would plug in a width that you would like to change the image to (1000px).然后，您将插入一个您希望将图像更改为 (1000px) 的宽度。 1000 x 0.504 = 504. This means that the height of the image should be 504 if the width is 1000 if you want to keep it proportional. 1000 x 0.504 = 504。这意味着如果宽度为 1000 如果要保持比例，图像的高度应为 504。
解决方案10
-1 2016-01-13 20:59:57
If you know the aspect ratio, you can use padding-bottom with percentage to set the height depending on the width of the diff.如果您知道纵横比，您可以使用带有百分比的 padding-bottom 来根据差异的宽度设置高度。
<div>
<div style="padding-bottom: 33%;">
I have 33% height of my parents width
</div>
</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.