html中图片等比例展示,纯 CSS，不用背景，实现图片等比例展示

最简单的等比例：div img { max-width:100%; max-height:100%; }

如上显示效果是：图片等比例缩放，不变形；图片所有区域都会显示。

但是，如上代码有可能会造成横向、纵向白边，当我们在做图片列表时，这会看起来有点乱，于是我们改进了下，保证横向没有白边，高度不足时上下留白，高度超出时隐藏图的上下：div { display:flex; align-items:center; justify-content:center; width:160px; height:90px; border:1px solid #eee; overflow:hidden; }

div img { width:160px; }

首先：display:flex; align-items:center; justify-content:center; 保证水平、垂直居中显示。

其次：width:160px; height:90px; border:1px solid #eee; 限定显示框的大小。

然后：overflow:hidden; 实现图片高度超出的话，隐藏之。

最后：width:160px; 保障图片宽度一致。

这样：当高度不够时，图片垂直居中，上下留白；当高度超出时，图片上下被隐藏。

html中图片等比例展示,纯 CSS，不用背景，实现图片等比例展示相关推荐

【CSS】纯css实现立体摆放图片效果
1. 元素的 width/height/padding/margin 的百分比基准设置一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
html如何实现立体效果,纯css实现立体摆放图片效果的示例代码
1.元素的 width/height/padding/margin 的百分比基准设置一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举个栗 ...
html如何实现立体效果,纯css实现立体摆放图片效果的实例代码
1. 元素的 width/height/padding/margin 的百分比基准设置一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
纯CSS无表达式实现图片等比缩放（支持IE7及以上）
在制作网页的时候,常常会遇到一种情况,我们需要把一些未知尺寸的图片放在一个固定宽高的容器中,这时候我们需要考虑这样的问题: 只给图片设置宽度或高度的其中一项可以实现图片等比缩放,但图片可能超出容器大小 ...
纯CSS的实现仿图片相册浏览模式代码
演示下载查看演示立刻下载本文标题: 纯CSS的实现仿图片相册浏览模式代码固定链接: http://www.tcode.me/article/1215.html 来自淘代码转载请注明
纯CSS实现背景渐变、球和阶梯的跳动
纯CSS实现背景渐变.球和阶梯的跳动作者:马光佳撰写时间:2019.1.17 开发工具与关键技术:MicrossftVisualStudio.animation与@keyframes的配合使用背 ...
纯css实现背景颜色渐变动画
纯css实现背景颜色渐变动画,代码及效果图如下. body {width: 100wh;height: 100vh;color: #fff;background: linear-gradient(-4 ...
Android 更改纯色背景图片颜色，可实现一张背景圆形图片展示不同颜色
Android 更改纯色背景图片颜色,可实现一张背景圆形图片展示不同颜色项目中可能会遇到比如多个纯色圆形背景列表或者说纯色圆形头像背景,一般让UI设计师设计多张背景图:但是有更好的方法只需一张图就可 ...
android 图片转换圆形黑色背景,Android 更改纯色背景图片颜色，可实现一张背景圆形图片展示不同颜色...
Android 更改纯色背景图片颜色,可实现一张背景圆形图片展示不同颜色项目中可能会遇到比如多个纯色圆形背景列表或者说纯色圆形头像背景,一般让UI设计师设计多张背景图:但是有更好的方法只需一张图就可 ...
CSS固定背景的图片
CSS固定背景的图片对于一些背景图片,当浏览器出现滚动条时,通常不希望图片随着文字的移动而移动,而是固定在某一位置. CSS通过background-attachment的值为fixed来实现. & ...

html中图片等比例展示,纯 CSS，不用背景，实现图片等比例展示

html中图片等比例展示,纯 CSS，不用背景，实现图片等比例展示相关推荐

最新文章

热门文章