图片列表以自适应父盒子宽高为准备

最新推荐文章于 2024-09-08 09:55:18 发布

伊达几

最新推荐文章于 2024-09-08 09:55:18 发布

阅读量177

点赞数 2

文章标签：前端 css

本文链接：https://blog.csdn.net/qq_39338202/article/details/140275695

版权

在图片比父盒子宽高都大时，正常情况只需要只父盒子确定宽高，img自适应即可；

如遇到父盒子的宽随着屏幕自适应时，高度写成静态，那图片效果便达不到想要的比较了，这时需要给父盒子添加相对定位：relative, 外加padding-bottom:100%，而img添加绝对定位：absolute，就可以解决宽度自适应，图片高度不一致效果

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

伊达几

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

【CSS小随笔】img将父元素撑大3px问题

F_san的博客

08-15

1138

1、原因 img是内联块元素（inline-block)，在结束的时候，会在末尾加上一个空白符（匿名文本），这个文本外有一个匿名行级盒子，它默认的vertical-align是baseline的，因为baseline对齐的原因，这个匿名盒子就会下沉，往下撑开一些距离，把父元素撑高。 .wrap{ background-color: red; } <div class="wrap"> <img src="../images/pic1.png" alt=""&

img标签撑大父盒子

weixin_49352307的博客

03-15

536

img标签里面装的图片比父盒子小，则可以装进父盒子，利用width：100%，height：100%即可。img标签里面装的图片如果比父盒子大，则不考虑用img标签，用背景图片装满父盒子。

参与评论您还未登录，请先登录后发表或查看评论

如何让图片宽度不变，高度自动变化，保持原图宽高比不变？

最新发布

weixin_56187723的博客

09-08

584

要让图片宽度不变，高度自动变化，同时保持原图的宽高比不变，你可以通过CSS样式来实现。这通常涉及到设置图片的宽度为固定值，并允许其高度根据容器的宽度和原图的宽高比自动调整。

img图片自适应

fengxiaopeng74的博客

06-19

173

展示多个图片就像微信朋友全一样，但是图片大小不一样所以我们需要将图片处理一样让他在规定的元素盒子里面。

图片依赖父容器等比适配不变形

m0_62323931的博客

07-16

267

在开发的时候，常常会遇到要基于父容器进行图片展示，父容器的宽高是固定的，需要将图片放进去，还需要保证图片等比缩放，不变形。下面有一些自带的css属性可以很好的解决这个问题。插入：小编自己封装了一个大文件上传的工具函数，支持切片上传、错误重试、上传进度、暂停和继续等，目前已发布在npm官网，感兴趣的可以看看。下载命令：npm i enlarge-file-upload。

解决img撑大父盒子

weixin_41440480的博客

07-10

4562

在浏览器开发者模式中div的高度要高于img的高度，然而div并没有设置边框和内边距。前提：div没有设置宽高，宽高是由img撑开的通过网上查看资料原因：与浏览器的user agent stylesheet有关 user agent stylesheet有时会给某些元素加上默认的margin和padding，从而导致样式出现问题。解决方法给image设置display:block样式 ...

自学前端第二十九天 CSS高级之细节技巧

weixin_47592060的博客

03-14

358

css高级细节技巧一.background-color :属性设置元素的背景颜色。定义和用法 background-color 属性设置元素的背景颜色。元素背景的范围 background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。 transparent 值 (让背景色透明) 尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素

css总结

love_dzq的博客

05-20

2237

对CSS2以及CSS3和移动端布局方式做了个总结

DIV+CSS学习笔记总结篇

qianduan666a的博客

07-29

937

DIV+CSS学习笔记总结篇第一部分 HTML 第一章职业规划和前景职业方向规划定位： web前端开发工程师 web网站架构师自己创业转岗管理或其他 web前端开发的前景展望：未来IT行业企业需求最多的人才结合最新的html5抢占移动端的市场自己创业做老板随着互联网的普及web开发成为企业的宠儿和核心 web职业发展目标：第一、梳理知识架构负责内容的HTML 负责外观的css（层叠样式表）负责行为

2022经典前端面试题大全 h5 +cs +js

qq_55194329的博客

10-11

1414

原型链等问题

前端面试题总结(PS:尊重劳动成果拿或者要原笔记记得滴滴)

weixin_46917587的博客

05-30

515

前端优化性能的方法压缩字体文件使用 fontmin-webpack 插件对字体文件进行压缩减少 HTTP 请求使用字体图标 iconfont 代替图片图标使用 webp 格式的图片减少重绘重排使用事件委托使用 Web Workers html + css 1. HTML和CCS3新增那些内容？广义上的html5指的是最新一代前端开发技术的总称，包括html5，CSS3，新增的webAPI。 Html中新

a标签中img把a标签撑大

m0_64036296的博客

09-22

364

a标签中有img有时候会把a撑过大

响应式列表中控制图片高度一致js

diaosheng8387的博客

06-12

239

function imgResize(){ var _w = $('ul li:first-child a').width(); $('ul li img.img-responsive').css('height',_w);}window.onload = function(){ imgResize();};$(window).resize(function(){ ...

css图片适应盒子大小

weixin_62918410的博客

11-02

9123

css图片适应盒子大小

img自适应父容器

wendZzoo的博客

08-07

4048

很多讲解图片自适应的方法都是将图片作为容器的背景图，通过背景图的一些属性来设置实现自适应的功能。但有时候难免需要用到嵌套在div中的img，将img自适应它的父容器div。 html结构： <div class="imgWrap"> <img src="test.png"> </div> 首先需要图片在父容器中居中显示，使用flex布局 .i...

html怎么使图片自动填充,CSS怎么将img图片填满父容器div自适应容器大小

weixin_39669075的博客

05-30

7544

CSS怎么将img图片填满父容器div自适应容器大小发布时间：2021-03-19 09:35:26来源：亿速云阅读：114作者：小新这篇文章将为大家详细讲解有关CSS怎么将img图片填满父容器div自适应容器大小，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。当一个页面中引入多张图片时候，会碰到图片尺寸不一致，单要求显示成一致的大小，我们直接设置图片尺寸会导致图...

CSS - 将img图片填满父容器div，自适应容器大小

qq_37131747的博客

12-06

2844

CSS - 将img图片填满父容器div，自适应容器大小

HTML-img设置100%后,会被定位的父盒子left改变自身大小

vincenlisir的博客

04-29

671

父元素宽高为百分比的时候flex不生效

06-10

2. 设置父元素的 `min-height` / `max-height` 和 `min-width` / `max-width` 属性，以确保其实际宽高能够正确计算。 3. 将父元素的宽高设置为固定值，而非百分比值。以上方法可以确保父元素的实际宽高能够正确...