图片填满div,真让人头大

这篇具有很好参考价值的文章主要介绍了图片填满div,真让人头大。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

家人们,这图片到底怎样才能完全填满div啊,想问度娘结果搜索的问题都乱七八糟的

(怎么那么多问题QAQ),描述问题都描述不来

具体问题如下:图片有自己的分辨率大小,例如宽100px,高100px,将图片添加到div中:

<div class="xx">

  <img src="xxx">

</div>

接着用css代码编辑样式的时候,首先设置div的宽高

.xx {

width:200px;

height:200px;

}

当div宽高大于图片的宽高的时候,这样图片就会填不满这个div,会显示在左上角,如何才能让图片填满这个div啊???

就不能设置一下图片的大小吗,例如来一个background-image-size这种的,哭惹!

久经尝试,找到了一个解决办法,就是再设置img的样式,宽高都100%显示,代码如下:

.xx img{

width:100%;

height:100%;

display:block;

}

这样不论图片的大小是否大于div的大小,都会被压缩至div大小一致程度(图片小的会被放大)(另外不会裁剪,是压缩)

有大佬能给出更好的解决方案吗,有例子最好了(咱还是个小菜,复杂了看不懂QAQ)!

完毕。文章来源地址https://www.toymoban.com/news/detail-435790.html

到了这里,关于图片填满div,真让人头大的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 在浏览器中使用javascript打印HTML中指定Div带背景图片内容生成PDF电子证书查询的解决方案

    要调用浏览器中的打印功能,并指定需要打印的内容为特定的DIV内的内容,你可以使用JavaScript来实现。下面是一种实现方法: 首先,在需要打印的DIV标签上添加一个唯一的ID属性,例如: 接下来,在JavaScript中使用 window.print() 方法来调用浏览器的打印功能,并指定打印的内容

    2024年02月13日
    浏览(59)
  • Qt之格栅布局(QGridLayout)控件填满整个单元格

    Qt专栏: 目录 1.现象1 2.解决方案 3.现象2 4.解决方案 5.总结         今天在用QGridLayout布局的时候,添加到布局的QWidget有文本框、标签、组合框和按钮等等,布局两列,通过下面的方式添加进去的: 发现在窗口拉伸的时候,pEdit 不会填满第0行1列的位置,右边有空隙。    

    2024年04月15日
    浏览(78)
  • vue 2.0需求拍摄证件照(需要设置人头取景框,鼠标也拖拽,键盘方向键可调整位置)

    继续昨天的代码更新一下 需求是: vue2 主页面是一个表格,存在按钮点击进行调取摄像头拍照,拍照呢要有头像的取景框,鼠标可移动,键盘通过方向键也可移动,调整了昨天的代码存在的问题,拖动会拍照一部分外面的内容, 今天,疑惑点在获取更新后的节点,及怎么设

    2024年01月18日
    浏览(43)
  • vue3前端实现全屏显示,元素垂直填满页面

    1、 toggleFullscreen方法实现选定元素全屏展示 2、使用flex属性+ flex-direction 实现垂直布局填满整个页面

    2024年01月16日
    浏览(40)
  • 麻了,这让人绝望的大事务提交

    继上次的if else优化也有段时间了,最近小猫又又又着道了,接手的那个项目又遇到了坑爹的地方,经常性的报死锁异常,经常性的主从延迟......通过报错信息按图索骥,发现代码是这样的。 这是一段商品发布的逻辑,我们可以看到参数校验、查询、最终的insert以及update全部

    2024年02月03日
    浏览(42)
  • 实现Qwidget窗口填满整个主窗口,并跟随鼠标的拖动自动缩放

    实现Qwidget窗口填满整个主窗口,并跟随鼠标的拖动自动缩放 新建一个窗口,我想在这个窗口上放一个QWidget,并且这个QWidget能够布满整个窗口,还可以随着随鼠标的拖动自动缩放 1、首先给大家介绍一个好用的组件库:qt-material-widgets (1)开源地址(基于QWidgets) 基于Qt Qui

    2024年02月10日
    浏览(46)
  • 做 SQL 性能优化真是让人干瞪眼

    很多大数据计算都是用SQL实现的,跑得慢时就要去优化SQL,但常常碰到让人干瞪眼的情况。 比如,存储过程中有三条大概形如这样的语句执行得很慢: 这里的T是个有数亿行的巨大表,要分别按三种方式分组,分组的结果集都不大。 分组运算要遍历数据表,这三句SQL就要把这

    2024年02月02日
    浏览(36)
  • GPT4和ChatGPT的区别,太让人震撼

    文 | Serendipity@知乎 GPT4上午朋友圈已经刷屏啦,不过我还在忙,刚刚才登上 GPT-4 ,现在来体验一下~ 附 GPT-4 能力测试站(无需魔法,仅供国内研究测试): https://gpt4test.com 附 ChatGPT 能力测试站(同样无需魔法,仅供国内研究测试): https://yeschat.cn GPT-4 还是我最喜欢的老问题

    2023年04月08日
    浏览(55)
  • 浅谈chatgpt如何改变人们生活

    ChatGPT,作为一种自然语言处理模型,确实有潜力改变人们的生活。以下是ChatGPT如何可能改变人们生活的几个方面: 1.智能助手和客户支持: ChatGPT可以作为智能助手嵌入到各种应用中,为用户提供即时的帮助和解答问题。在客户支持方面,它可以大大提高自动化程度,快速响

    2024年02月16日
    浏览(42)
  • 十几个冷门还好用的PHP写法(冷门的让人震惊)

    环境:PHP8.1 1. else foreach/else for 2. 匿名函数简写 3. 匿名函数叠加 4. 消失的分号 5. 空数组合并运算符 6. 利用内置类,创建空对象 7. 利用?-安全导航运算符,避免调用不存在的方法或属性时报错 8. 单独调用某个命名空间下的方法 9. 移位运算符 / 10. 位运算符 |/ 11. 异或运算符

    2024年02月04日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包