关于html：使用CSS按比例调整图像大小？


Resize image proportionally with CSS?

本问题已经有最佳答案，请猛点这里访问。

有没有一种方法可以仅使用CSS按比例调整(缩小)图像大小？

我正在用JavaScript的方式，但是只是想看看CSS是否可行。

相关讨论

要使用CSS按比例调整图像大小，请执行以下操作：

1
2
3
4
img.resize {
    width:540px; /* you can use % */
    height: auto;
}
相关讨论

控制大小并保持比例：

1
2
3
4
5
6
#your-img {
    height: auto;
    width: auto;
    max-width: 300px;
    max-height: 300px;
}
相关讨论

如果是背景图像，请使用background-size：contain。

示例CSS：

1
2
3
4
#your-div {
  background: url('image.jpg') no-repeat;
  background-size:contain;
}
相关讨论

尝试

1
2
3
transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);
相关讨论

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

相关讨论

通过保持纵横比缩放图像

尝试这个，

1
2
3
4
img {
  max-width:100%;
  height:auto;
}

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

1
2
3
4
5
.my-image {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

这将适合图像，而无需按比例更改。

相关讨论

回顾2015年：

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

我已经重新审视了它，因为所有常见的浏览器现在都具有上面谢里夫建议的自动工作方式，因此即使您不需要知道图像的宽度是否大于高度，它的效果也更好。

较旧的版本：
例如，如果您受限于120x100的框，则可以

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

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

相关讨论

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

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

编辑：但是请参阅Shawn关于意外增大的警告。

相关讨论

使用这种简单的缩放技术

1
2
3
4
5
6
7
8
9
img {
    max-width: 100%;
    height: auto;
}
@media {
  img {
    width: auto; /* for ie 8 */
  }
}

1
2
3
4
img{
    max-width:100%;
    object-fit: scale-down;
}

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

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

1
2
3
4
5
6
.scaled
{
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
}

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

要么

1
<img src="flower.png" style="transform: scale(0.7);">
相关讨论

1
2
3
4
5
6
7
img {
    max-width:100%;
}

div {
    width:100px;
}

使用此代码段，您可以更高效地完成此操作

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

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

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

尝试这个：

1
2
3
4
5
6
7
8
9
10
div.container {
    max-width: 200px;//real picture size
    max-height: 100px;
}

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

你总是需要这样的东西

1
2
3
4
5
html
{
    width: 100%;
    height: 100%;
}

在您的css文件顶部

相关讨论

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

相关讨论