css高度自适应屏幕-如何让图片响应式缩放并手动剪切的css方法

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

如何让图片响应式缩放并手动剪切的css方法也适用于一些轮播父容器的响应式缩放

响应式网站、DIVCSS布局的移动页面进行图片列表或图片排版，

如果你想让图像按比例缩放，

最简单的方法是将img长度设置为100%，

如果没有设置高度，高度会根据高度手动缩放

但要想达到疗效，图片的宽高必须按一定的比例显示，比如1:1、4:3等。

但图片的大小不是这个比例，我不希望图片被拉伸变形。 我手动把两边多余的部分剪掉。 如何解决这个问题呢？

首先明天准备四种不同宽度和高度的材料，如右图所示：

先展示一下最终效果：

（注意这里的裁剪是以中间为基础的，顶部、底部或者左右两侧都有裁剪）

（宽高1:1）：

（宽高4:3）：

（宽高3:4）：

成就风格

html部分：

<div class="zoomImage" style="background-image:url(images/test1.jpg)"></div>

CSS部分：

.zoomImage{
    width:100%;
    height:0;
    padding-bottom: 100%;
    overflow:hidden;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    background-size:cover;
}

原理分析

width:100%;
height:0;
padding-bottom: 100%;
overflow:hidden;

样式中前四句的主要目的是让div以1:1的尺寸出现。

虽然高度：0； 高度为0，填充值为100%

这是因为padding是一个比例的时候，是根据他父层的厚度来估计的。

MDN的一些关于padding的文档中也提到了，有兴趣的朋友可以看一下。

background-position: center center;
background-repeat: no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;

前五句使用了css3中的background-size:cover特性，将背景图片扩展至足够大的尺寸，使背景图片完全覆盖背景区域。

当padding是比例的时候，我画了一张图css高度自适应屏幕，希望能帮助你理解：

总结：就是你需要的比例，就是width与padding-bottom的比例

使用时，只需使用.zoomImage作为img标签即可。

关于扩展到响应式轮播：

这里我以swiper轮播插件为例：

该插件是目前广泛使用的js插件，用于触摸中国联通网页内容，balabala...

这个插件本来就是响应式的，是的，

但有两个问题：

1.你必须给他这个旋转木马的高度，但是高度不是固定的，需要按比例。

（不仅使用js，或者使用media query来设置每个帧率的高度/这个简直不要太冗长）

所以我们也可以利用刚才的padding方法，使其成为一个可以按比例缩放的容器

2、轮播中的图片比例不符合要求怎么办（我又回到这个问题了css高度自适应屏幕，现在知道怎么做了）

优化前：

优化：

可以做成轮播图片，可以根据比例进行适配，无需遵循图片规范。

关于兼容性：

该样式具有使用 CSS3 的属性：background-size:cover；

那么我们在制作响应式、移动端页面的时候，也必须使用CSS3媒体查询或者其他CSS3样式，不过联通浏览器对CSS3支持比较好，所以应该不用担心这个。