使用CSS按比例更改图像大小
我已经尝试了几天，现在配置我的缩略图库，使所有的图像显示相同的高度和宽度。但是，当我将CSS代码更改为，
max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;
我得到的图像大小都一样，但纵横比被拉伸，破坏了图像。有没有办法调整图像容器的大小而不是图像？允许我保持纵横比，但仍然调整图像大小。（我不介意剪掉一些图片。）
共有3个答案
您可以使用objectfitCSS
<!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>
您需要固定一侧（例如高度），并将另一侧设置为auto。
例如
height: 120px;
width: auto;
这将仅基于一侧缩放图像。如果您认为裁剪图像是可以接受的，您可以设置
overflow: hidden;
到父元素，它将裁剪出任何超出其大小的内容。
这是CSS调整大小的一个已知问题。除非所有图像的比例相同，否则您无法通过CSS实现这一点。
最好的方法是使用一个容器，并调整图像的一个尺寸（始终相同）。在我的示例中，我调整了宽度的大小。
如果容器有指定的尺寸（在我的例子中是宽度），当告诉图像宽度为100%时，它将使其成为容器的全宽度。高度处的自动将使图像具有与新宽度成比例的高度。
例子：
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无法获得相同的行为。例如，我尝试过 其中“ myButton”在CSS文件中定义为 如果这只是我想做的，则可以使用原始样式，但是我想更改悬停时按钮的外观（使用类）。我知道链接很好，因为我已经能够将它们加载为页面其他部分的背景图像（仅作为检查）。我在网上找到了使用JavaScript进行操作的示例，但我正在寻找CSS解决方案。 我正
-
问题内容： 我正在尝试使用JavaScript更改图像的大小。jS文件与HTML页面分开。 我想在JS文件中设置图像的高度和宽度。有什么好的方法吗？ 问题答案： 引用图像后，就可以像这样设置其高度和宽度： 在html中，它看起来像这样：
-
我想用一个按钮在三个不同的位置改变图像的位置...用我的代码图像只移动了一个位置... ViewController.h ViewController.m }
-
我刚刚在文件夹下添加了一个新的可绘制文件夹。在drawable文件夹中，我复制了ic\U启动器。png文件来自可绘制hdpi文件夹。当我按下按钮时，我想通过新的图像更改标准的图像按钮。我写了一些代码，但当我启动应用程序时，它崩溃了。 编辑：我改成了这个，这个也不行。 编辑2：这很有效。感谢大家。
-
问题内容： 这里有一个简单的问题：我试图使用较小的图例（即文本较小）。我正在使用的代码是这样的： 问题答案： 您可以通过调整关键字为图例设置单独的字体大小。 这需要对应于属性的关键字字典。参见图例文档： 关键字参数： 从1.2.1版开始，也可以使用关键字。
-
问题内容： 我的图片尺寸会很大，我想使用jQuery缩小图片，同时保持比例不变，即长宽比相同。 有人可以指出一些代码或解释其逻辑吗？ 问题答案： 看看来自的这段代码