使用CSS按比例更改图像大小？ [英] Changing image sizes proportionally using CSS?

问题描述

我一直尝试几天来配置我的缩略图库，所有的图像显示相同的高度和宽度。但是，当我将Css代码更改为

  max-height：150px; 
 max-width：200px; 
 width：120px; 
 height：120px; 
  

我得到的图片大小相同，但宽高比被拉长毁了图片。有没有办法调整图像容器而不是图像的大小？让我保持长宽比。但仍然调整图像大小。 （我不介意如果我切掉一些图像。）

提前感谢！

方案

这是CSS调整大小的一个已知问题，除非所有图像具有相同的比例，你没有办法通过CSS这样做。

最好的方法是有一个容器，并调整其中一个维度（总是相同）的图像。在我的例子中，我调整了宽度。

如果容器有一个指定的维度（在我的例子中的宽度），当告诉图像宽度为100％它会使它的整个宽度的容器。 auto 在高度将使图像的高度与新宽度成比例。

例如： p>

HTML：

 < div class =container> 
< img src =something.png/> 
< / div> 
 
< div class =container> 
< img src =something2.png/> 
< / div> 
  

CSS：

  .container {
 width：200px; 
 height：120px; 
} 
 
 / * resize images * / 
 .container img {
 width：100％; 
 height：auto; 
} 
  

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,

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!

解决方案

this is a known problem with CSS resizing, unless all images have the same proportion, you have no way to do this via 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 auto at the height will make the image have the height proportional to the new width.

Ex:

HTML:

<div class="container">
<img src="something.png" />
</div>

<div class="container">
<img src="something2.png" />
</div>

CSS:

.container {
    width: 200px;
    height: 120px;
}

/* resize images */
.container img {
    width: 100%;
    height: auto;
}

这篇关于使用CSS按比例更改图像大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！