CSS图像本身的尺寸调整百分比？

一尘不染

CSS图像本身的尺寸调整百分比？

css

我正在尝试使用自身百分比来调整img的大小。例如，我只想通过将图像尺寸调整为50％将图像缩小一半。但是应用width: 50%;会将图像调整为容器元素（例如，父元素）的50％<body>。

问题是，我可以在不使用javascript或服务器端的情况下按一定比例调整图像大小吗？（我没有图像尺寸的直接信息）

我很确定您不能这样做，但是我只想看看是否有仅CSS的智能解决方案。谢谢！

阅读 599

2020-05-16

共1个答案

一尘不染

我有两种方法给你。

方法1. jsFiddle上的演示

此方法仅在视觉上调整图像大小，而不在DOM中调整其实际尺寸，并且调整大小后的视觉状态以原始大小的中间为中心。

HTML：

<img class="fake" src="example.png" />

CSS：

img {
  -webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
     -moz-transform: scale(0.5); /* FF3.5+ */
      -ms-transform: scale(0.5); /* IE9 */
       -o-transform: scale(0.5); /* Opera 10.5+ */
          transform: scale(0.5);
             /* IE6–IE9 */
             filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}

浏览器支持说明： 浏览器的统计信息以内联显示css。

方法2. jsFiddle上的演示

HTML：

<div id="wrap">
    <img class="fake" src="example.png" />
    <div id="img_wrap">
        <img class="normal" src="example.png" />
    </div>
</div>

CSS：

#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%;
}

注意： img.normal和img.fake是同一张图片。
浏览器支持说明： 该方法将在所有浏览器中都可用，因为所有浏览器都支持css该方法中使用的属性。

该方法以这种方式工作：

#wrap并#wrap img.fake有流量
#wrap具有overflow: hidden使得它的尺寸是相同的内图像（img.fake）
img.fake是内部唯一#wrap没有absolute定位的元素，因此不会破坏第二步
#img_wrap在absolute内部定位#wrap并在尺寸上扩展到整个元素（#wrap）
第四步的结果是#img_wrap具有与图像相同的尺寸。
通过设置width: 50%上img.normal，它的大小是50%的#img_wrap，因此50%原始图像的尺寸。

2020-05-16