移动网站产品图片列表保持等比例缩放 (不变形)
【移动端布局】让图片保持等比例缩放 (不变形)
摘要:前端写页面布局时,图片变形是个很令人头疼的问题,手机屏幕分辨率不一样,出来的效果就不一样,下面的代码可以解决这些问题,保持图片在不同分辨率下面也可以让图片不变形
解决代码:
1、首先不能给外层列表定高度,用margin或者padding撑开
.album-li-pic{
height: 0;
overflow: hidden;
margin: 0;
padding-bottom: 100%;
}
2、img用定位的方式布局,width设置成为100%
.album-li-pic img{
display: block;
position: absolute;
width: 100%;
top: 0;
bottom: 0;
}
html代码如下
<li class=”album-li”>
<a>
<div class=”album-li-pic”>
<img src=”” class=”album-pic” />
</div>
</a>
</li>
如果图片不是正方形的,可以调整padding-bottom来实现,比如图片要求4:3,那么padding-bottom就设置为75%就行了
另外:解决PC端网站文章的图片到手机端就变形问题:
我们在做响应式网站或者织梦M功能手机站的时候,会发现如果内容页图片太大,在移动端显示会变形,dede手机端图片过长等问题,手机端文章内容页图片不能自适应!这给通过手机端浏览网站的用户造成了很不好的用户体验,所以,必须要整改。今天就给大家介绍一下“织梦DedeCMS手机端文章内容页图片不能自适应的解决办法!”,希望对大家有帮助!
解决方法:
例如:
<div class=”con”>
<p>{dede:field name=’body’/}</p>
</div>
加入控制样式:<style>.con img{width: 100% !important; height:auto !important;}</style>
关于版权
除特别说明外,本博客内容皆为原创,可以自由转载传播,但请署名及注明出处链接:https://www.weitongsheng.com:443/archives/3152.html