如何让图片按父元素的宽的按比例显示整张图片

已于 2022-06-25 22:39:28 修改
阅读量731 收藏
点赞数
文章标签： 前端 img
于 2019-09-07 11:11:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43821151/article/details/100593276
版权

首先图片的父元素要设定好width，图片的css：max-width:100%.便可

不过，为了性能更加优化，建议图片尽量以原始大小输出

Linsanity_林好酷
关注
QML Canvas 绘制图像
青春不老，奋斗不止！
06-21 990
对于 QML Canvas 而言，除了前面讲解的点线面的基本绘制之外，它还提供了一项很有意思的特性 - 绘制图像。只要是 Qt 支持的图片格式都可以使用，比如 PNG、JPEG 等，甚至可以将其它 Canvas 元素生成的图片作为图片源。
Qt开发经验总结
草上爬的博客
12-02 8348
增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。
图片依赖父容器等比适配不变形
最新发布
m0_62323931的博客
07-16 235
在开发的时候，常常会遇到要基于父容器进行图片展示，父容器的宽高是固定的，需要将图片放进去，还需要保证图片等比缩放，不变形。下面有一些自带的css属性可以很好的解决这个问题。插入：小编自己封装了一个大文件上传的工具函数，支持切片上传、错误重试、上传进度、暂停和继续等，目前已发布在npm官网，感兴趣的可以看看。下载命令：npm i enlarge-file-upload。
图片随父级元素自适应
ZJ_152261的博客
05-15 3410
<!DOCTYPE html> <html> <head> <title>测试用例</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css&q
【前端】css控制背景图片缩放
姜太小白的博客
07-08 1578
css控制背景图片缩放
图片自适应父元素的大小，并左右上下居中
u010977934的博客
05-13 1237
这种用法很常见，特记录一下。我用了两个不同大小的图片，存放图片的div都是等宽等高的。 HTML如下： CSS如下：.pic { width: 120px; height: 120px; margin: 40px auto; border: 1px solid #ccc; text-align: center; padding: 5px;
css元素的显示模式
m0_68840537的博客
04-16 131
引言:元素的显示模式通俗的说就是给一个元素/标签进行一次分类，分类的依据是元素以什么样的方式显示在页面里，例如是独占一行（div）还是一行多个（span），元素的显示模式一般认为有三种:块级、行内元素和行内块元素。 7.1. 块级元素 块级元素，顾名思义就是成块状显示的元素，块内可以包含其他的块级元素、行内元素、行内块元素作为子元素，并且块级元素具有以下特征: 一个块级元素必须独占一行，多行书写会自动换行 高度、宽度、内外边距都可以自主设置 宽度不设置的情况下默认是父元素宽度的100% 本身
如何让img标签在父元素中自适应宽度或者高度，按比例显示
a1783118的博客
11-01 6342
如何让img标签在父元素中自适应宽度或者高度，按比例显示
html图片的高宽大小,CSS：如何设置相对于父高的图像大小？
weixin_34837898的博客
06-05 1036
小编典典原始答案：如果您准备选择CSS3，则可以使用css3translation属性。根据更大的尺寸调整大小。如果您的高度大于容器的宽度，而宽度小于容器的宽度，则宽度将被拉伸到100％，高度将从两侧被修剪。同样适用于更大的宽度。您的需求， HTML： 和 CSS：.img-wrap {width: 200px;height: 150px;position: relative;displ...
【CSS】【面试题】牛客网CSS专项练习部分答案及解析（更新中...）
weixin_39006917的博客
03-01 6373
1.在W3C标准盒模型中，默认情况下块元素的总宽度为： content content+2*padding content+2*padding+2*border content+2*padding+2*border+2*margin 答案为：content 解析：CSS有两种盒子模型，分别为W3C盒子模型和IE盒子模型。区别在于，IE盒子模型的content部分，将border和padding包含进去了。width = border+padding+content。题干问的总宽度应该理解为width值为
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
m0_55613022的博客
02-24 3192
HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。 怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolute（绝对定位）或f
决策树ID3和C4.5算法Python实现源码
wenyusuran的专栏
05-28 8651
首先推荐李航的《统计机器学习》这本书，这个实现就是按照书上的算法来的。Python 用的是最新的3.3版的，和2.x不兼容，运行的时候需要注意。 [python] view plaincopy '''''  Created on 2012-12-18   @author: weisu.yxd '''      class Node:      '''''Repres
纯CSS控制背景图片100%自适应填充布局
热门推荐
淘淘小窝
01-18 21万+
原文:http://www.uedsc.com/css-background-size-100.html 解决: html,body{height: 100%;width: 100%;margin:0;padding:0;} body{ background:url(bg-login.png)no-repeat; width:100%; height:100%; ba
图片填满父元素，自适应缩放
m0_55315930的博客
07-30 2709
#max-width:100% 相对于img本身的尺寸而言，最大的宽度为自身宽度 #width:100% 相对于父级宽度的 1.等比例缩小垂直居中：按宽度等比列缩放 或者可以选择按高度等比缩放 .photo-box{ display: table-cell; text-align: center; vertical-align: middle; overflow: hidden; width: 88px; height: 120px; } ...
图片自适应父元素大小，并左右上下居中的css方法
FungLeo's Blog
05-10 9084
图片自适应父元素大小，并左右上下居中的css方法前言这种效果多见于矩形盒子里面调用不规则的图片，希望能够达到的效果。这个效果可以很简单的用css来实现，虽然已经烂熟于心，但是并未记录下来。今天看到又有这个需求，所以写了一个简单的demo，放在这里，便于自己记忆。效果图：代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
CSS-实现不同尺寸大小图片自适应父级DIV
weixin_41976150的博客
02-23 1万+
介绍：有时我们放置图片时，因为父级元素固定了大小导致图片比例失调或者是图片被裁剪，体验非常不好。下面介绍一个简单的方法（初学者，欢迎大家提出建议） HTML: &lt;div class="outer"&gt; &lt;img src="img/0117985b836f01a8012190f234ee4c.jpg@2o.jpg"&gt; &lt;/div&gt; &lt;di...
让图片(img)的最长边撑满父元素同时让图片居中、不变形
I_2436的博客
05-08 5025
这里先说一个名词：元素的宽高比例，即用元素的宽除以元素的高（width / height）得到的数值就是元素的宽高比例。 要让图片的最长边撑满父元素，同时让图片不变形并且居中显示出来是分三种情况的。 第一种情况：图片的宽高比例和父元素的宽高比例相等，图片尺寸就是父元素的尺寸，这一种情况可能不常见。 第二种情况：图片的宽高比例小于父元素的宽高比例时，这个时候图片的高能完全展示出来，图片的宽则会等比...
页面布局 ——图片自动按比例显示&&图片随外部div的增大而按比例增大
weixin_30628801的博客
03-15 992
图片按比例显示，分为两种情况。 1.空的div内加图片 <div class="emty"><img src="img/my.png"></div> 空的div内加图片： .emty img{ 　　width:100px; } 只需设置图片的宽度（固定：px）。此时div不用设置宽和高，其宽度会自动和图片宽度保持一致，高度会按图片的比例自动生成。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值