如何使用 CSS 调整图像的大小，使其达到图像本身的百分比？

小开

缩放图片:

img {
transform: scale(0.5);
}

<img src="https://via.placeholder.com/300x200" />

小开

最佳答案

我有两个方法给你。

方法1。

该方法只调整图像的视觉尺寸，而不调整 DOM 中的实际尺寸，调整后的视觉状态集中在原始尺寸的中间。

img {
transform: scale(0.5);
}

<img src="https://via.placeholder.com/300x200" />

Browser support note: browsers statistics showed inline in css.

Method 2.

#wrap {
overflow: hidden;
position: relative;
float: left;
}


#wrap img.fake {
float: left;
visibility: hidden;
width: auto;
}


#img_wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}


#img_wrap img.normal {
width: 50%;
}

<div id="wrap">
<img class="fake" src="https://via.placeholder.com/300x200" />
  

<div id="img_wrap">
<img class="normal" src="https://via.placeholder.com/300x200/cccccc" />
</div>
</div>

注: img.normal和 img.fake是同一幅图像。
浏览器支持说明: 此方法将在所有浏览器中工作，因为所有浏览器都支持方法中使用的 css属性。

这种方法是这样工作的:

#wrap和 #wrap img.fake有血流
#wrap具有 overflow: hidden，因此其尺寸与内部图像(img.fake)相同
img.fake是 #wrap中唯一没有 absolute定位的元素，这样它就不会破坏第二步
#img_wrap在 #wrap内部有 absolute定位，并且在大小上延伸到整个元件(#wrap)
第四步的结果是 #img_wrap具有与图像相同的尺寸。
通过在 img.normal上设置 width: 50%，它的大小是 #img_wrap的 50%，因此是原始图像大小的 50%。

小开

我想你是对的，就我所知，纯 CSS 是不可能的(不是跨浏览器)。

好吧，我不是很喜欢我的答案，所以我有点困惑。我可能发现了一个有趣的想法，可能会有帮助。.也许这毕竟是可能的(尽管不是最漂亮的东西) :

测试和工作在 Chrome，FF 和 IE8 & 9。它不工作在 IE7。

#img_wrap {
display: inline-block;
position: relative;
}


#rescaled_img_wrap {
width: 50%;
}


#original_img {
display: none;
}


#rescaled_img {
width: 100%;
height: 100%;
}

<div id="img_wrap">
<img id="original_img" src="https://via.placeholder.com/300x200" />
<div id="rescaled_img_wrap">
<img id="rescaled_img" src="https://via.placeholder.com/300x200/dddddd" />
</div>
</div>

小开

这实际上是可能的，我在设计我的第一个大型响应式设计站点时偶然发现了这一点。

Overflow: hide 给出了包装器的高度和宽度，尽管内容是浮动的，但是没有使用 clearfix hack。然后可以使用边距定位内容。您甚至可以将包装器 div 设置为内联块。

.wrapper {
position: relative;
overflow: hidden;
}


.box {
float: left; /* Note: 'float:right' would work too */
}


.box>img {
width: 50%;
}

<div class="wrapper">
<div class="box">
<img src="https://via.placeholder.com/300x200" alt="">
</div>
</div>

小开

这是使用容器元素方法的最简单的解决方案之一。

在使用容器元素方法时，这个问题是这个问题的一个变体。诀窍是让容器元素收缩子图像，这样它的大小就等于未调整大小的图像的大小。因此，当将图像的 width属性设置为百分比值时，图像将相对于其原始比例缩放。

其他一些启用收缩包装的属性和属性值是: float: left/right、 position: fixed和 min/max-width，如链接问题中提到的。每个都有自己的副作用，但 display: inline-block是一个更安全的选择。马特在他的回答中提到了 float: left/right，但是他错误地把它归因于 overflow: hidden。

span {
display: inline-block;
}


img {
width: 50%;
}

<span>
<img src="https://via.placeholder.com/300x200"/>
</span>

编辑: 正如特洛伊木马所说，你也可以利用新推出的 CSS3内部和外部尺寸模块:

figure {
width: intrinsic;
}


img {
width: 50%;
}

<figure>
<img src="https://via.placeholder.com/300x200" />
</figure>

然而，在撰写本文时，并非所有流行的浏览器版本都支持它。

小开

function shrinkImage(idOrClass, className, percentShrinkage){
'use strict';
$(idOrClass+className).each(function(){
var shrunkenWidth=this.naturalWidth;
var shrunkenHeight=this.naturalHeight;
$(this).height(shrunkenWidth*percentShrinkage);
$(this).height(shrunkenHeight*percentShrinkage);
});
};


$(document).ready(function(){
'use strict';
shrinkImage(".","anyClass",.5);  //CHANGE THE VALUES HERE ONLY.
});

这个解决方案使用 js 和 jquery，并且只根据图像属性调整大小，而不根据父图像属性调整大小。它可以使用 class 和 id 参数调整单个图像或组的大小。

想了解更多，请点击这里: https://gist.github.com/jennyvallon/eca68dc78c3f257c5df5

小开

另一种解决方案是:

<img srcset="example.png 2x">

它不会验证，因为需要 src属性，但是它可以工作(除了在 IE 的任何版本上，因为不支持 srcset)。

小开

这是一个非常古老的线程，但我发现它在寻找一个简单的解决方案，显示视网膜(高分辨率)屏幕捕捉标准分辨率显示。

因此，现代浏览器只有一种 HTML 解决方案:

<img srcset="image.jpg 100w" sizes="50px" src="image.jpg"/>

这告诉浏览器图像的尺寸是其预期显示尺寸的两倍。该值是成比例的，不需要反映图像的实际大小。人们也可以使用2w 1px 来达到同样的效果。Src 属性只能由遗留浏览器使用。

它的好处是在视网膜或标准显示屏上显示相同的尺寸，而在后者上显示缩小。

小开

这种方法并不难:

div {
position: absolute;
}


img,
div {
width: ##%;
height: ##%;
}

<div>
<img src="https://via.placeholder.com/300x200" />
</div>

小开

虽然它没有直接回答这个问题，但是缩放图像的一种方法是相对于视窗的大小(特别是宽度) ，这是响应式设计的主要用例。不需要包装器元素。

img {
width: 50vw;
}

<img src="https://via.placeholder.com/300x200" />