图片百分比 html,HTML
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参数调整单个图像或组的大小。
更多信息，请访问：[]
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