CSS-实现不同尺寸大小图片自适应父级DIV

介绍：有时我们放置图片时，因为父级元素固定了大小导致图片比例失调或者是图片被裁剪，体验非常不好。下面介绍一个简单的方法（初学者，欢迎大家提出建议）

HTML:

<div class="outer"><img src="img/0117985b836f01a8012190f234ee4c.jpg@2o.jpg"></div><div class="outer"><img src="img/art-blue-sky-daylight-1251720.jpg"></div><div class="outer"><img src="img/v2-5935f8e9440aa3ada16fd70381c1cb41_r.jpg"></div>

当CSS只这样写时:

.outer {width: 100px;height: 500px;background-color: aquamarine;margin: 20px;}

图片随意摆放，有的被裁减，有的溢出父元素

实现自适应，我们给图片这样设置：

img {max-width: 100%;max-height: 100%;}

为了方便观察，我给父元素加了float

再用flex布局实现垂直水平居中

.outer {display: flex;align-items: center;justify-content: center;width: 100px;height: 500px;background-color: aquamarine;margin: 20px;}img {max-width: 100%;max-height: 100%;}

实际应用时，将父元素的width: 100px;改成width: 100%;

图片根据屏幕会缩放

CSS-实现不同尺寸大小图片自适应父级DIV相关推荐

css img 适配尺寸_img图片自适应布局_HTML5教程_郭隆邦技术博客
图片自适应布局源码下载使用百度图片搜索的时候,可以看到搜索页面,所有的图片基本都是定高度显示,图片的宽度随着高度等比例缩放.点击搜搜页面的每一张图片, 可以跳转到一个页面只有一张图片,显示的尺寸是 ...
图片自适应父元素大小，并左右上下居中的css方法
图片自适应父元素大小,并左右上下居中的css方法前言这种效果多见于矩形盒子里面调用不规则的图片,希望能够达到的效果.这个效果可以很简单的用css来实现,虽然已经烂熟于心,但是并未记录下来.今天看到 ...
解决子级用css float浮动而父级div没高度不能自适应高度
当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 方法一:对父级设置固定高度此方法可用于能确定父级div内子级对象高度. 缺点: 父级是固定高度,而不随 ...
父级div没高度不能自适应高度的原因——子级使用css float浮动
好久没写博客了,最近捡起前端代码开始码,一些基本的东西都忘记了,觉得自己停滞不前的原因就是没做好巩固--废话我们常常在做盒子嵌套的时候,最外层盒子不想给他设置高度,因为我们填充的内容不确定有多大,一 ...
使用VideoPlayer播放mp4(隐藏控件，点击全屏，窗口自适应父级)
1.npm npm install vue-video-player --save 2.main.js引入 import VideoPlayer from 'vue-video-player' imp ...
在vue中使用echarts根据父级div大小自动适应大小
首先,你需要在组件中引入 ECharts.然后,你可以在组件的 mounted 钩子函数中初始化 ECharts 实例,并在组件的 template 中渲染 ECharts. 在 mounted 钩子 ...
CSS - table超出父级div
用到div包裹table的布局,想要的效果是table的宽度等于div宽度,超出内容省略号显示. 听起来很简单啊,设置table宽度为100%,省略号三行代码往上一粘,心想着大功告成. but!!!! ...
如何获取元素在父级div里的位置_关于元素的浮动你了解多少
首先,在介绍什么是浮动之前我们先介绍一下html中元素的普通流布局方式.在普通流中,元素是按照它在 HTML 中的出现的先后顺序自上而下依次排列布局的,在排列过程中所有的行内元素水平排列,直到当行被占 ...
用css使用html设置背景图片自适应,CSS怎么设置背景图片自适应全屏？附源码！...
不少同学在设置网站背景图片时会遇到这么一个问题:背景图片总是不能铺满整个屏幕,不是图片太小就是图片被过度放大,显得不太美观.那么 CSS 怎么设置背景图片自适应全屏呢?这篇文章告诉你. 实现效果: 源 ...

CSS-实现不同尺寸大小图片自适应父级DIV

CSS-实现不同尺寸大小图片自适应父级DIV相关推荐

最新文章

热门文章