相关疑难解决方法(0)

我试图用自己的百分比来调整img的大小.例如,我只想将图像缩小到50%,将图像缩小一半.但是应用width: 50%;会将图像的大小调整为容器元素的50%(<body>例如,可能是父元素).

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

我很确定你不能这样做,但我只想看看是否有智能的CSS解决方案.谢谢!

94
推荐指数

5
解决办法

15万
查看次数

我img在文档中放置标记而不知道相应图像的宽度/高度:

<img src="/myimage.png" />

我想使用CSS将图像缩放到其"原生"大小的一半(底层图像的大小).我无法弄清楚如何做到这一点.

使用width: 50%相对于包含块的大小,而不是图像.
我无法确定特定像素宽度的大小,因为我不知道图像大小.
由于我只需要支持WebKit,我尝试使用转换:
```
-webkit-transform: scale(0.5);
```
Run Code Online (Sandbox Code Playgroud)
这可以很好地调整图像,但不会调整图像元素本身的大小.
@Radagaisus建议使用Javascript,这是一个很好的后备.然而,这是在一个超轻量级的移动页面上,所以我不能使用jQuery,并且手动处理所有onload()处理程序将是一个痛苦.

作为后记:为什么我这样做？因为我需要处理Retina显示屏.我可以使用devicePixelRatio并填充更大的(2x)图像来检测它,但是我需要将它们缩小到50%以在显示器上看起来正确.

78
推荐指数

4
解决办法

10万
查看次数

css ×2