欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

361模板网

当前位置:361模板网 > 技术文档 > 程序代码 > CSS小技巧:图片按比例缩放多余部分隐藏
这篇文章主要为大家详细介绍了CSS小技巧:图片按比例缩放多余部分隐藏,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

可能有些朋友看题目不能理解具体的含义,我们就先来看下面这张图片

CSS小技巧:图片按比例缩放多余部分隐藏


参看上面的图片我们再看理解题目CSS实现图片按比例缩放多余部分隐藏,是不是就能明白是什么意思了。下面我们具体来讲解下如何实现。

例如一张宽度为1000像素的图片我想要从中间开始等比绽放到100像素,然后左边和右边超出来的部分隐藏,得到我想要的按比例缩放图片效果。代码如下:

<div style="width:500px;overflow:hidden;display:flex;justify-content:center;align-items:center;">
<img src="1.jpg"/>
</div>

上面的代码是将一张图片的宽度设定为500像素超出来的左右等比隐藏。这个运行后的效果就是上面的图片效果。


以上就是CSS小技巧:图片按比例缩放多余部分隐藏的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: css 图片缩放 等比率缩放

上一篇CSS小教程:CSS中的浮动和清除浮动

下一篇织梦模板中常见的php语句及使用教程

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在