关于图片自适应的做法

最新推荐文章于 2024-08-26 15:05:50 发布
最新推荐文章于 2024-08-26 15:05:50 发布
阅读量574 收藏
点赞数
分类专栏： 前端 文章标签： 布局 图片自适应 前端 padding布局 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rinyPeng/article/details/78683440
版权
本文介绍了通过CSS实现图片自适应的一种方法，利用padding垂直方向的百分比值根据父级宽度计算的特性，创建三层HTML结构，实现固定比例的图片容器。通过设置父级宽度、子级padding和图片定位，可以方便地创建如1:1比例的图片容器，兼容性良好，适合前端开发者使用。
摘要由CSDN通过智能技术生成

前段时间在网上看了一篇关于图片自适应的文章，受益匪浅，“原来还有这种做法”！自己尝试了一遍，发现确实挺好用，所以把要点高压缩总结了一遍，分享给大家。

这种图片自适应做法主要利用的是padding垂直方向的百分比值是根据父级宽度计算的。

这种做法我们需要三层html结构，分别是最外层负责宽度的父级盒子，中间层是负责高度的子级盒子，最里面就是我们自适应宽高的图片。

//html
<div class="box">
    <div class="wrap">
        <img src="timg.jpg" alt="">
最低0.47元/天 解锁文章
rinyPeng
关注
专栏目录
图片尺寸自适应算法
03-17
NULL 博文链接：https://superwulei.iteye.com/blog/580318
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
01-20
代码： import sys from PyQt5.QtWidgets import (QWidget, QHBoxLayout, QLabel, QApplication) from PyQt5.QtGui import QPixmap class Example (QWidget): def __init__(self): super ().__init__ () ...
图片自适应
看风听雨
04-19 408
图片自适应 <div class="img-wrap"> img src="imgs/560x200.jpg" alt=""> div> <div class="img-wrap"> img src="imgs/440x200.jpg" alt=""> div> <div class="img-wrap"> img src="imgs/300x200.jpg" a
自适应图片尺寸：打造响应式网页的必备技术
最新发布
weixin_42599908的博客
08-26 1063
本文还有配套的精品资源，点击获取 简介：在响应式网页设计中，自适应图片至关重要，它确保图片在不同设备和屏幕尺寸下都能正确显示。本文将深入探讨自适应图片的概念、实现方法和优化策略，包括CSS单位、 max-width 属性、 object-fit 属性、响应式框架、 <picture> 元素和响应式图片服务。此外，还将介绍...
css图片自适应
wuqiuyude的专栏
03-08 931
在加载一些图片的时候，图片的大小是不知道的，但是图片的包裹框大小是固定的。 <div class='wrapper'> <img scr='img.jpg'/> </div>第一种情况：图片不失真，自动适应div。 .wrapper{width:200px;height:200px;overflow:hidden;} img{width：100%；height:auto;}也可以用img{m
谈一下图片的自适应
菜鸟的博客
10-10 4116
在工作中经常遇到要求图片自适应的需求，下面就谈一下我在工作中经常使用的一些方法 单独使用img标签的情况 单独使用img的时候，可以只设置width就可以了，height不用设置，因为img不设置height，它会自动根据图片的比例设置自适应高度 例如： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" .
图片自适应(使其不挤压，不失真)
不懂前端的小韩的博客
07-10 719
图片自适应，使其不挤压，不失真
css 图片自适应宽度 CSS实现控制图片自适应显示宽度代码
12-13
在网页设计中，图片自适应宽度是一个非常重要的概念，它能确保无论图片原始尺寸多大，都能在不同屏幕尺寸和设备上以合适的比例显示，从而提高用户体验。在本篇文章中，我们将深入探讨如何使用CSS来实现图片的自适应...
css图片自适应大小
10-30
### CSS图片自适应大小 #### 知识点一：JavaScript实现图片自适应 在Web开发中，有时我们需要让页面中的图片根据容器或者浏览器窗口的大小进行自动调整，以确保图片能够在不同尺寸的设备上正常显示。传统的做法是...
微信小程序 图片自适应 ，富文本解析 (源码)
05-31
微信小程序 图片自适应 ，富文本解析 (源码)微信小程序 图片自适应 ，富文本解析 (源码)微信小程序 图片自适应 ，富文本解析 (源码)微信小程序 图片自适应 ，富文本解析 (源码)微信小程序 图片自适应 ，富文本解析 ...
完美适配图片自适应
weixin_42657666的博客
10-24 6014
当我们在网页中使用图片时，经常会遇到需要将图片调整为适应容器大小的情况。这篇博客将介绍通过背景图和标签的object-fit属性来实现图片自适应的几种方式。
根据图片大小自适应的CSS
08-28
根据图片大小自适应的CSS，根据图片大小自适应的CSS
如何让图片自适应
城市过客的专栏
03-09 591
[原文地址: http://blogs.hray.info:10000/2014/03/09/picauto/] 比如我们在一个div中要放一个图片，但图片太大，超过了div的显示区域。通常有两种方法处理，一种是通过设置div的overflow: hidden来隐藏超出部分；另一种是手动设定图片要显示的大小。但这两种方法都有些问题，第一种方法导致不能看到全图，第二种方法要记住图片
CSS背景图片自适应大小
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
10-31 613
/*数据指标装饰框*/ .rim { position: relative; background: url("../images/boder.png"); background-size: 100% 100%; padding: 10px; margin-bottom: 15px; z-index: 10; } Done！
怎样图片自适应大小
weixin_45548211的博客
09-02 1万+
只需要给图片本身加几个 CSS 属性即可： // HTML <div> <img src="path.jpg" alt" /> </div> // CSS /* 给定父级的宽高 */ div { width: 500px; height: 500px; /* 如果需要让图片各方位居中 */ display: flex; justify-cont...
css 图片自适应屏幕大小
qq_33240556的博客
06-13 2555
通过使用max-widthobject-fit以及 Flexbox 等方法，你可以轻松实现图片自适应屏幕大小。这些方法可以单独使用，也可以结合使用，以满足不同的设计需求。
HTML中的图片如何自适应屏幕？这篇文章有图片的自适应用法介绍
热门推荐
lin123_00的博客
05-27 2万+
首先我们看看HTML中的图片是如何自适应屏幕的： 让图片自适应屏幕大小最简单的方法，保证管用，你把那个图片写在div里面的背景里，也就是background:url(../img/1.jpg) center no-repeat; 这样就能够自适应屏幕大小了，而且不会出现横向的滚动条 首先是设置background:url(图片地址) 0 0 no-repeat scroll transparent;background-size:100% 100%; 打造全网web前端全栈资料库（总目录）看完学的更
css让图片自适应容器（div）大小,超便捷响应式图片自适应
weixin_30710457的博客
07-14 697
我们在写页面的时候经常会遇到需要图片自适应容器大小这样的情况，下面我就开门见山的说明一下怎样去实现这样一个效果。 1.简单的做法 1 2 3 4 5 <div> <img src="1.jpg" alt=""> </div> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值