移动网站产品图片列表保持等比例缩放 (不变形)

【移动端布局】让图片保持等比例缩放 (不变形)

摘要：前端写页面布局时,图片变形是个很令人头疼的问题,手机屏幕分辨率不一样,出来的效果就不一样,下面的代码可以解决这些问题,保持图片在不同分辨率下面也可以让图片不变形

解决代码：

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