705

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

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

4

18 回答 18

813

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

img.resize {
    width:540px; /* you can use % */
    height: auto;
}
于 2010-04-26T08:28:25.797 回答
260

控制大小并保持比例：

#your-img {
    height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;
}
于 2013-03-19T14:17:58.030 回答
124

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

示例 CSS：

#your-div {
  background: url('image.jpg') no-repeat;
  background-size:contain;
}
于 2013-12-20T17:30:56.107 回答
86

尝试

transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);
于 2014-01-17T02:49:06.740 回答
66

您可以使用对象拟合属性：

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

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

于 2016-09-08T16:19:46.783 回答
54

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

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

于 2013-09-29T15:07:39.427 回答
50

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

尝试这个，

img {
  max-width:100%;
  height:auto;
}
于 2013-12-10T18:01:29.503 回答
30

Revisited in 2015:

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

I've revisited it as all common browsers now have working auto suggested by Cherif above, so that works even better as you don't need to know if image is wider than taller.

older version: If you are limited by box of 120x100 for example you can do 

<img src="http://image.url" height="100" style="max-width: 120px">
于 2012-01-12T17:43:41.680 回答
26 
<img style="width: 50%;" src="..." />

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

编辑：但请参阅肖恩关于意外升迁的警告。

于 2009-04-24T23:47:15.967 回答
24

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

于 2009-04-24T23:49:01.233 回答
19 
img{
    max-width:100%;
    object-fit: scale-down;
}

为我工作。它会缩小较大的图像以适合盒子，但将较小的图像保留为原始大小。

于 2017-06-21T19:36:17.760 回答
17

我相信这是最简单的方法，也可以通过标签style内的 inline 属性使用。<img>

.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);">
于 2018-07-23T23:21:44.393 回答
13

使用这种简单的缩放技术

img {
    max-width: 100%;
    height: auto;
}
@media {
  img { 
    width: auto; /* for ie 8 */
  }
}
于 2014-07-01T14:28:29.713 回答
4 
img {
    max-width:100%;
}

div {
    width:100px;
}

使用此代码段，您可以以更有效的方式进行操作

于 2013-05-21T05:43:19.993 回答
4

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

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


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

于 2017-08-23T08:22:21.917 回答
2

你总是需要这样的东西

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

在你的 css 文件的顶部

于 2014-06-24T08:30:27.487 回答
2

尝试这个：

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

/* resize images */
div.container img {
    width: 100%;
    height: auto;
}
于 2016-03-06T22:17:18.800 回答
1

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

于 2018-01-29T04:56:37.307 回答