固定大小容器内，不同比例的图片高度撑满，宽度居中裁剪

在一个商品展示列表中，一个需求是在一个正方形的方块中，按原比例展示商品图片，但是图片比例不定，需要居中显示，高度撑满，宽度多余的隐藏。

结构：

imgOuter是固定容器，宽高都是120px；

CSS代码：

.imgOuter{width: 120px;height: 120px;border-radius: 10px;overflow: hidden;border: 1Px solid #d7d7d7;position: relative;  z-index: 1;
}

img居中显示的CSS，由于宽度不定，所以使用了transfrom的translate，思路来源于网上的某个文章，但是找不到出处了：

.imgWH{height: 100%;position: absolute;top: 0;left: 50%;transform: translateX(-50%);
}

需要注意imgOuter中的z-index:1，在img上使用transform后，imgOuter如果不设置z-index，那么它的overflow：hidden将会失效。来源于：

KevinYue----https://segmentfault.com/q/1010000005174964/a-1020000005175107

最终结果：

图片被居中显示，高度撑满，并两边裁剪掉了多余的宽度。

固定大小容器内，不同比例的图片高度撑满，宽度居中裁剪相关推荐

css解决uniapp使用image标签图片无法撑满全屏问题
css解决uniapp使用image标签图片无法撑满全屏问题文章目录 css解决uniapp使用image标签图片无法撑满全屏问题前言一.问题还原二.问题解决 1.在解决问题之前有必要先来学习 ...
微信小程序 - 设置图片高度自适应（宽度固定）
我们要放入多张一样宽度不一样高度的图片的时候,我们不能同时都设置固定的高度,这样会使得一些图片被挤压或者有些会出现空白的现象,这些都不能满足我们的需求,所以我来说一下如何实现图片高度自适应. 我们 ...
css背景图片百分百宽高,css背景图片高度百分百，宽度保持比例怎么做？
css中有宽度百分百,若想达到高度占屏幕的百分百,宽度保持纵横比应该怎么做呢, 希望详细解答,嘻嘻如果你指的是背景图的话- background-size: auto 100%; 会是你想要的效果的 ...
html 填满父容器,CSS让子元素div的高度填满父容器的剩余空间的方法
1.使用浮动的方式效果图: 代码如下:(注意,此时.content的高度是500px,即父元素的高度,但是浮动元素在 .content 上方,盖住了 .content,将 .nav背景样式改为 ba ...
固定大小显示图片html,JQuery加载图片自适应固定大小的DIV
如何在固定大小的div中放置一个图片,当图片较小时显示实际大小,当图片超过div 大小时图片自动适应div 的大小 jquery图片自适应大小实现过程的主要代码: 代码如下: .divImg{ ma ...
【uni-app】动态计算图片高度且保持宽高比
前言图片容器宽度已确定图片加载后,将图片容器按照图片的宽高比设置高度思路图片容器宽度已确定. uni-app的image组件,将mode设置为scaleToFill(不保持纵横比缩放图片,使图 ...
css控制图片拉伸不变形,css+background实现图片宽高自适应，拉伸裁剪不变形
图片宽高不固定 ,一样实现自适应,拉伸裁剪不变形,适应各大兼容性. 下面咱们在网上找两张宽高不一样的照片: No.1 ...
如何让图片自适应不同屏幕宽度，并居中显示。
我们在浏览网站的时候发现,很多网站的banner图片都是全屏宽度.这种图片都是在不同分辨率下都是显示图片的中间部分,这里我们介绍两种方式, 第一种就是常见的方式,用定位我简单定义为三部曲: - 让包 ...
截取固定大小图片css,css-使不同大小的图片在固定大小的容器中居中
HTML示例如下: 方法一: .imgbox{ position: relative; width: 240px; height: 240px; } .imgbox img{ position: ab ...

固定大小容器内，不同比例的图片高度撑满，宽度居中裁剪

固定大小容器内，不同比例的图片高度撑满，宽度居中裁剪相关推荐

最新文章

热门文章