使用CSS按比例调整图像大小？

Question

有没有办法仅使用 CSS 按比例调整（缩小）图像大小？

我正在使用 JavaScript 方式，但只是想看看这是否可以用 CSS 实现。

Answer 1

要使用 CSS 按比例调整图像大小：

img.resize {
    width:540px; /* you can use % */
    height: auto;
}

Answer 2

控制大小并保持比例：

#your-img {
    height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;
}

Answer 3

如果是背景图片，请使用background-size:contain。

示例CSS：

#your-div {
  background: url('image.jpg') no-repeat;
  background-size:contain;
}

Answer 4

尝试

transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);

Answer 5

您可以使用object-fit属性：

.my-image {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

这将适合图像，而不改变比例。

Answer 6

请注意，width:50% 会将其大小调整为图像的可用空间的 50%，而 max-width:50% 将调整大小图像自然尺寸的 50%。 在移动网页设计中使用此规则时，这一点非常重要，因此对于移动网页设计，应始终使用 max-width。

更新：这可能是一个旧的 Firefox 错误，现在似乎已经修复。

Answer 7

要通过保持图像的纵横比来缩放图像

试试这个，

img {
  max-width:100%;
  height:auto;
}

Answer 8

2015 年重新审视：

<img src="http://imageurl" style="width: auto; height: auto;max-width: 120px;max-height: 100px">

我重新审视了它，因为所有常见的浏览器现在都具有上面 Cherif 建议的工作自动功能，因此效果更好，因为您不需要知道图像是否更宽而不是更高。

旧版本：
例如，如果您受到 120x100 盒子的限制，您可以这样做

<img src="http://image.url" height="100" style="max-width: 120px">

Answer 9

<img style="width: 50%;" src="..." />

对我来说工作得很好......或者我错过了什么？

编辑：但是请参阅肖恩关于意外增大尺寸的警告。

Answer 10

css 属性 max-width 和 max-height 工作很好，但 IE6 不支持，我相信 IE7。 您可能希望在高度/宽度上使用此功能，这样您就不会意外放大图像。 您只想按比例限制最大高度/宽度。

Answer 11

img{
    max-width:100%;
    object-fit: scale-down;
}

对我有用。 它会缩小较大的图像以适合框，但保留较小的图像的原始大小。

Answer 12

我相信这是最简单的方法，也可以通过 标记中的内联 style 属性使用。

.scaled
{
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
}

<img src="flower.png" class="scaled">

或者

<img src="flower.png" style="transform: scale(0.7);">

Answer 13

使用这种简单的缩放技术

img {
    max-width: 100%;
    height: auto;
}
@media {
  img { 
    width: auto; /* for ie 8 */
  }
}

Answer 14

img {
    max-width:100%;
}

div {
    width:100px;
}

通过这个片段，你可以以更有效的方式做到这一点

Answer 15

我们可以使用媒体查询和响应式设计原理在浏览器中使用 CSS 来调整图像大小。

    @media screen and (orientation: portrait) {
img.ri {
    max-width: 80%;
  }
}

@media screen and (orientation: landscape) {
  img.ri { max-height: 80%; }
}

Answer 16

总是需要这样的东西

html
{
    width: 100%;
    height: 100%;
}

你的 css 文件顶部

Answer 17

尝试这个：

div.container {
    max-width: 200px;//real picture size
    max-height: 100px;
}

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

Answer 18

image_tag("/icons/icon.gif"，高度：'32'，宽度：'32')
我需要将 height: '50px', width: '50px' 设置为图像标签，此代码从第一次尝试开始工作，注意我尝试了上述所有代码，但没有运气，所以这个有效，这是我的 _nav.html 中的代码。 erb：
<%= image_tag("#{current_user.image}", 高度: '50px', 宽度: '50px') %>