当前位置: 首页 » 移动网站产品图片列表保持等比例缩放 (不变形)

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

作者: 江湖哥 分类: 织梦建站笔记 发布时间: 2019-11-05 13:43 171 百度已收录

温馨提示:本文共810个字,预计阅读时间需要3分钟

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

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

解决代码:

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

如果觉得我的文章对您有用,请随意打赏或点赞.您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注