有朋自远方来,不亦乐乎。
CSS技巧:避免图片被拉伸
原创 橘子书  发布于 5个月前 ( 07-25 ) 阅读: 784 次 评论: 8 条 A+

5月初写文章伪封面功能的时候,残留了一个特色图被拉伸的bug没有解决……晚上终于抽空处理掉了,同时也把leo主题文章缩略图被拉伸的问题一并给解决了。

方法其实很简单,这里简单说一下。

前提

纵向图片要横向展示(换句话说就是:高比宽长的图片如何变成宽比高长)

成果

图片等比例展示中上部分,避免被拉伸

方法

html部分需要用div标签闭合img标签

<div class="A">
<img src="图片URL" class="B"/>
</div>

CSS写法

.A{
overflow:hidden;
position:relative;
width:360px;//按需设置宽度
height:120px;//按需设置高度
transition:all .5s
}
.B{
width:100%;
height:auto;
}

 庭说

DEMO我就不放了,反正就那样子。至于原理嘛,就更简单了:先设定div容器的宽与高,溢出部分不显示,然后设置img的高为auto。就介样子!

Principle Team
龙砚庭官方QQ群,一个坚持强怼的7P成员群!
10人已关注

目前评论:8   其中:访客  4   博主  4

发表评论

莫慌,小狮子正在努力加载评论...
  1. 西枫里博客
    西枫里博客3 ( 2018.07.29 11:28:08 )  4楼

    这个我会,你能不能写PS教程,我就想蹭蹭~

  2. boke112导航
    boke112导航3 ( 2018.07.26 17:46:21 )  地板

    图片大于这个指定大小的DIV还行,如果图片小于这个DIV宽高好像就有问题,不过这种小概率问题无所谓了

  3. 沈唁志
    沈唁志2 ( 2018.07.26 10:38:44 )  板凳

    牛逼啊,我可以试试这么改,每次都要切图700*200

  4. 龙笑天
    龙笑天3 ( 2018.07.26 9:59:03 )  沙发

    跟着大佬涨姿势了~ :evil: