HTML - CSS图像调整自身的百分比？

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

的父元素)。

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

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

Min Ming Lo asked 2019-08-25T06:28:56Z

9个解决方案

98 votes

我有2种方法。

方法1.在jsFiddle上演示

此方法仅调整图像大小，而不是DOM中的实际尺寸，以及调整大小后居中于原始大小中间的视觉状态。

HTML：

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');

}​

浏览器支持说明：浏览器统计信息显示在width: 50%中。

方法2.在jsFiddle上演示

HTML：

​

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

}​

注意：width: 50%和img.normal是相同的图像。

浏览器支持说明：此方法适用于所有浏览器，因为所有浏览器都支持方法中使用的50%属性。

该方法以这种方式工作：

width: 50%和img.normal有流量

width: 50%具有img.normal使其尺寸与内图(50%)相同

width: 50%是img.normal内唯一没有50%定位的元素，因此它不会打破第二步

width: 50%具有img.normal定位在50%内并扩大为整个元素(#img_wrap)

第四步的结果是width: 50%具有与图像相同的尺寸。

通过设置width: 50%在img.normal上，其大小为50%，即#img_wrap，因此原始图像大小为50%。

Vladimir Starkov answered 2019-08-25T06:30:57Z

37 votes

HTML：

CSS：

span {

display: inline-block;

}

img {

width: 50%;

}

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

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

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

在jsfiddle上演示

编辑：正如木马所提到的，你也可以利用新推出的CSS3内在＆amp; amp; 外在尺寸模块：

HTML：

CSS：

figure {

width: intrinsic;

}

img {

width: 50%;

}

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

Community answered 2019-08-25T06:32:11Z

10 votes

试试zoom的财产

编辑：显然，FireFox不支持zoom属性。 你应该使用;

-moz-transform: scale(0.5);

对于FireFox。

Emir Akaydın answered 2019-08-25T06:32:54Z

3 votes

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

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

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

.box > img { width:50%; }

overflow：hidden给出了包装器的高度和宽度，尽管有浮动内容，但没有使用clearfix hack。 然后，您可以使用边距定位内容。 您甚至可以使包装器div成为内联块。

Matt answered 2019-08-25T06:33:31Z

3 votes

另一个解决方案是使用：

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

benface answered 2019-08-25T06:34:03Z

1 votes

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

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

这告诉浏览器图像的尺寸是预期显示尺寸的两倍。 该值是成比例的，不需要反映图像的实际大小。 也可以使用2w 1px来达到相同的效果。 src属性仅供旧版浏览器使用。

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

Max_B answered 2019-08-25T06:34:56Z

0 votes

我认为你是对的，就我所知，纯粹的CSS是不可能的(不是跨浏览器我的意思)。

编辑：

好吧，我不太喜欢我的回答，所以我有点困惑。 我可能已经找到了一个有趣的想法，可以帮助...也许它毕竟是可能的(虽然不是最漂亮的东西)：

编辑：在Chrome，FF和IE 8＆amp; 9中经过测试和使用。。 它在IE7中不起作用。

这里是jsFiddle的例子

HTML：

CSS：

#img_wrap {

display: inline-block;

position:relative;

}

#rescaled_img_wrap {

width: 50%;

}

#original_img {

display: none;

}

#rescaled_img {

width: 100%;

height: 100%;

}

Wesley answered 2019-08-25T06:35:54Z

0 votes

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]

Jenny Vallon answered 2019-08-25T06:36:31Z

0 votes

这是一个不难的方法：

then in css:

div {

position: absolute;

}

img, div {

width: ##%;

height: ##%;

}

nickthehero answered 2019-08-25T06:37:00Z