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

Question

有没有办法使用ONLY 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:contains.

示例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

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

Answer 6

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

试试这个,

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

Answer 7

您可以使用object-fit属性:

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

这将适合图像,而不是按比例改变.

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

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

Answer 10

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

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

编辑:但看到肖恩关于意外升迁的警告.

Answer 11

使用这种简单的缩放技术

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

Answer 12

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

适合我.它缩小较大的图像以适合框,但将较小的图像留下原始大小.

Answer 13

我相信这是最简单的方法，也可以通过标记中的inline style属性使用<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);">