我试图通过一个百分比来缩小一张图片的大小。例如,我只想将图片缩小一半,使其大小为原来的50%。但是应用 width: 50%;
将会将该图片大小调整为容器元素(可能是父元素,例如 <body>
)的50%。
问题在于,我是否可以使用自身百分比来调整图片大小,而不使用JavaScript或服务器端?(我没有直接获取图像大小的信息)
我非常确定您无法这样做,但我只是想看看是否有聪明的仅使用CSS的解决方案。谢谢!
我为您提供两种方法。
该方法仅调整图像的可视大小,而不是它在DOM中的实际尺寸,并且缩放后的可视状态位于原始大小的中心位置。
img {
transform: scale(0.5);
}
<img src="https://via.placeholder.com/300x200" />
浏览器支持注释:浏览器统计数据显示在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%;
}
<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
中唯一没有绝对定位的元素,以避免破坏第二步。#img_wrap
在 #wrap
中具有绝对定位,并且在大小上扩展到整个元素 (#wrap
)。#img_wrap
具有与图像相同的尺寸。img.normal
上设置 width: 50%
,其大小为 #img_wrap
的 50%
,因此是原始图像大小的 50%
。width
属性设置为百分比值时,图像相对于其原始比例进行缩放。float: left/right
,position: fixed
和 min/max-width
,如链接的问题中所述。每种方法都有自己的副作用,但display: inline-block
是一个更安全的选择。Matt在他的答案中提到了float: left/right
,但他错误地将其归因于overflow: hidden
。
span {
display: inline-block;
}
img {
width: 50%;
}
<span>
<img src="https://via.placeholder.com/300x200"/>
</span>
编辑:正如trojan所提到的那样, 您还可以利用新引入的CSS3内在和外在尺寸模块:
figure {
width: intrinsic;
}
img {
width: 50%;
}
<figure>
<img src="https://via.placeholder.com/300x200" />
</figure>
<img src="https://www.google.com/images/srpr/logo11w.png"/>
CSS:
img { display: inline-block; width: 15%; }
- Chnikkifigure
的值是width: fit-content;
。现代浏览器的支持也更好了。 - Dániel Kis-Nagymax-content
吗? - aindurti缩放图片:
img {
transform: scale(0.5);
}
<img src="https://via.placeholder.com/300x200" />
这是一个非常古老的帖子,但我在寻找一种简单的解决方案来在标准分辨率显示屏幕上显示高清(retina)屏幕截图时找到了它。
所以现代浏览器有一个仅使用HTML的解决方案:
<img srcset="image.jpg 100w" sizes="50px" src="image.jpg"/>
这是告诉浏览器该图像的尺寸是其预期显示尺寸的两倍。这些值是成比例的,不需要反映图像的实际尺寸。也可以使用2w 1px来达到相同的效果。src属性仅由旧版浏览器使用。
它的好处是在Retina或标准显示器上显示相同的大小,而在后者上缩小。
另一个解决方案是使用:
<img srcset="example.png 2x">
由于 src
属性是必需的,因此它无法进行验证,但它可以工作(除了任何IE版本,因为不支持 srcset
)。
src
,这样就可以验证了。在支持srcset
的浏览器中(所有现代浏览器),图像将始终被正确地调整大小。 - undefined.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>
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,仅基于图像属性而不是父级进行调整大小。它可以根据类和id参数调整单个图像或一组图像的大小。
欲了解更多信息,请访问此处:https://gist.github.com/jennyvallon/eca68dc78c3f257c5df5
我认为你是对的,就我所知,仅使用纯CSS是不可能的(我的意思是不跨浏览器)。
好吧,我不太喜欢我的答案,所以我想了一下。我可能找到了一个有趣的想法,可以帮助解决问题...也许它确实是可能的(虽然不是最漂亮的东西):
在Chrome、FF和IE 8&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>
inline-block
,所以 #img_wrap
的宽度不仅取决于内部 HTML 宽度,还取决于上下文容器的宽度。 - Vladimir Starkov这是一个不难的方法:
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" />
width: <number>%
,它将占用包含元素的百分比。我认为没有其他方法可以做到这一点! - Aniket