网站设计中让网页内的图片不拉伸

宁波网站建设 | 2018-04-12

网站设计中让网页内的图片不拉伸

网站设计中怎么让网页里面的图片不拉伸呢?下面小编给大家讲解:



当设定了imgwidth和height属性的时候,css中。图片将会拉伸。尤其是使用一些该模板的应用顺序的时候。


应当首先通过div设定一个固定的容器,这个时候。并且给容器定义宽和高。然后可以自选给这个容器加上一个边框。


网站设计


这个时候图片就能依照其本身的大小显示了但是会发现图片显示在容器的最顶端,然后不给图片的img设定width和height属性。并不美观。

最后给之前设定的这个div容器加入一个display:table-cell;属性就可以了

网站设计公司



div容器css这里加上了边框)

.sbox-bd.thumb{width:222px;height:222px;border:1pxsolid#EBEBEB;display:table-cell;vertical-align:middle;}

img容器css

.side-elist.aphoto{display:block;margin-bottom:3px;vertical-align:middle;}

html代码


网站设计


转载请注明:网站设计:http://www.mfstory.cn/newsdetail.php?cid=4&id=620
上一篇:网站设计:SEO优化的重要性下一篇:基于搜索引擎友好的网站设计

18868949445