css ：解决图片实际宽高不满足容器宽高，造成短边露出背景色

最新推荐文章于 2023-06-01 13:57:33 发布
最新推荐文章于 2023-06-01 13:57:33 发布
阅读量956 收藏
点赞数
分类专栏： 日常开发总结 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39137100/article/details/123529799
版权

在这里插入图片描述
高度固定的情况下，如果直接设置height:100%,那么图片会变形，显然不是我们想要的。
解决办法：将图片改成背景图，并且设置background-size:cover

background-size:cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中

<div class="face-head-img" :style="{ backgroundImage: 'url(' + cardHeadPicUrl + ')' }"></div>

在这里插入图片描述

tomato西红柿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[CSS]图片无法自适应高宽bug排查过程
水行云起
11-10 1941
css图片自适应高宽
CSS样式中解决背景图片不能完美填充页面(页面高度很高)
YodgeGGG的博客
12-07 1932
先上个图 这里我的图片是1920x1080像素的 但页面高度有2000像素左右，想要图片可以完美填充页面背景 只需写入以下代码 body { margin: 0; padding: 0; background-image: url(assets/img/bg15.png); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } 重中之重就
css 设置背景图一半_css怎么背景图片显示不全？
weixin_39716044的博客
12-20 6281
css设置背景图片显示不全是因为背景图片过大导致的，我们可以通过设置div大小大于背景图片或使用background-size属性设置背景图片小于div大小使背景图片显示完全。其中导致背景图片显示不全的原因是：设置背景图片所在div大小小于背景图片大小。示例：下面我们来看一下通过设置div大小来使背景图片完全显示：div{width:100px;height:100px;background-si...
css 设置背景图一半_空间里CSS中如何设置背景图片的高度（显示不全）
weixin_39790102的博客
12-20 904
#header{height:89px;background:#FFFFFF}#header div.lc{background:url(http://bbsimg.house.focus.cn/upload/photos/2710/wNLOHqbi.jpg) no-repeat}#header div.rc{background:url(http://bbsimg.house.focus.cn/...
【CSS】盒子模型内边距 ⑤ ( 内边距不影响盒子模型尺寸的情况 | 不设置宽度或高度为其设置 Padding 内边距时不撑开盒子 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-18 1696
一、内边距不影响盒子模型尺寸的情况 二、内边距影响盒子模型尺寸的情况
html 图片上打开图片显示不全,css设置的图片显示不全怎么解决？
weixin_39646688的博客
06-04 3257
css可以通过背景图片的background-size属性来设置图片大小，使图片可以完全显示。background-size属性规定背景图像的尺寸。css可以通过设置背景图片的background-size属性来设置图片大小，使图片可以完全显示。background-size属性规定背景图像的尺寸。css设置背景图片显示不全示例：div{width: 150px;height: 100px;bor...
CSS 实现的图片宽高自适应固定边框
09-25
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
CSS实现的图片宽高自适应固定边框
09-25
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
不定宽高div内图片垂直居中的css样式
09-25
总结起来，解决不定宽高div内图片垂直居中的问题，可以采用在图片前插入`span`元素并配合CSS样式的方法。虽然这种方法在IE6/7中有效，但在现代浏览器中，更推荐使用Flexbox或Grid布局，它们提供了更为灵活和强大的...
HTML5&CSS3网页制作：CSS控制视频的宽高.pptx
05-31
CSS控制视频的宽高 video元素自身控制 01 通过元素自身属性控制 在HTML5中，经常会通过为video元素添加宽高的方式给视频预留一定的空间，这样浏览器在加载页面时就会预先确定视频的尺寸，为其保留合适的空间，使页面...
Dropify.js图片宽高自适应的方法
10-18
在Dropify.js中，默认的样式可能无法满足这种需求，但通过自定义CSS和JavaScript，我们可以实现图片的宽高自适应。 首先，我们需要修改CSS来调整图片预览区域的样式。在你的CSS文件中添加以下代码： ```css .title...
css --关于背景图片显示不出来的情况
热门推荐
sinat_36841379的博客
03-23 1万+
关于背景图片，有些时候它可以正常地显示出来，但是有时候它却不可以，那究竟是什么原因呢？今天 我就是碰到了这个问题。 解决这个问题之前我们首先应该知道块级元素和行内元素，块级元素一般来说是可以设置宽和高的以及 其他的属性等等，但是行内元素是不可以设置宽高等属性的。块级元素和行内元素师取决于元素的类型 ，每一个元素都有自己的默认的类型。 接下来我们给出代码：看这里
css 显示图片中间部分 图片短边显示出来
QQ2856639881的专栏
10-23 551
css 显示图片中间部分 图片短边显示出来
图片瀑布流，so easy！
前端队长Daotin
11-08 431
什么是图片瀑布流 用一张花瓣网页的图片布局可以很清楚看出图片瀑布流的样子： 简单来说，就是有很多图片平铺在页面上，每张图片的宽度相同，但是高度不同，这样错落有致的排列出 n 列的样子很像瀑布，于是就有了瀑布流图片一说。 实现原理 1、第一种方式 第一种方式前提是：图片的宽度固定，但是列可变(根据屏幕大小) 通过上面的介绍，我们知道要实现瀑布流的前提是宽度一致(假如为100px)，高...
css怎样让背景充满整个屏幕
單棲情緒
03-13 5236
css怎样让背景充满整个屏幕 　　 ...Your content goes here... 　　给body标签指定背景图，这样背景图就可以填充整个浏览器viewport了。 　　其实，该方案对所有的块级容器都可以生效。块级容器的宽高是动态的，那么背景图将自动伸缩，充满整个容器。 　　CSS body标签的样式如下： 　　body { /* 加
html图片没有白边,css插入背景图片底部有白边的解决方法
weixin_42299066的博客
06-04 3496
相信很多小伙伴遇到过用CSS插入背景图时，底部出现白边的情况，如下图：个人总结了2个方法如下：解决方法1：给图片都加上 vertical-align: middle属性。有时，移动端也会有类似的情况出现，如下图：这种情况在移动端出现时，也可以给图片加上这个属性，(微信页面可能出现底部白边的情况更多，可能是因为很多微信页面是以图片为主)解决方法2：用PS软件把背景图片的高度调高一些。出现的原因：可能...
css背景图片全屏铺满自适应不拉伸
qq_45442879的博客
06-01 8908
使用background设置背景图，使用background-size: contain 自适应背景定位区域的最大大小，此时如果设置图片高度会导致电脑上正常，显示器上高度不能撑满或设置高度无效图片显示不出来的问题，需要通过设置padding-top百分比将图片高度挤出来，完美解决！使用background-size: cover 背景图片放大到适合元素容器的尺寸，图片比例不变，但是超出容器的部分可能会裁掉，图片显示不完整。
css解决uniapp使用image标签图片无法撑满全屏问题
qq_43205326的博客
11-25 9277
css解决图片无法撑满全屏问题
html图片的高宽大小,CSS：如何设置相对于父高的图像大小？
weixin_34837898的博客
06-05 983
小编典典原始答案：如果您准备选择CSS3，则可以使用css3translation属性。根据更大的尺寸调整大小。如果您的高度大于容器的宽度，而宽度小于容器的宽度，则宽度将被拉伸到100％，高度将从两侧被修剪。同样适用于更大的宽度。您的需求， HTML： 和 CSS：.img-wrap {width: 200px;height: 150px;position: relative;displ...
css背景图片宽高比
最新发布
08-26
CSS背景图片的宽高比可以通过设置背景的大小来实现。常用的设置背景大小的属性是`background-size`。在CSS代码中，可以使用`background-size`属性来指定背景图片的宽度和高度的比例关系。 如果想要保持背景图片的宽高比固定，可以使用以下方法： 1. 使用`background-size: contain;`属性，这会使背景图片在不改变宽高比的前提下，尽量显示全部图片，但可能会留白； 2. 使用`background-size: cover;`属性，这会使背景图片完全填充整个容器，但可能会裁剪部分图片； 3. 使用`background-size: 100% auto;`或`background-size: auto 100%;`属性，这样可以保持图片的宽度或高度与容器的宽度或高度相等，但另一方向可能会超出容器。 这些属性可以根据具体的需求选择使用，以实现不同的背景图片宽高比效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [CSS实现自适应下保持宽高比](https://blog.csdn.net/weixin_28977715/article/details/119369532)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [CSS背景图片固定宽高比自适应调整的实现方法技术分享](https://blog.csdn.net/weixin_39869593/article/details/117844755)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值