图片在div完全显示

效果图:

html代码:

  <div class="container"  style=" display: flex;width: 550px;height: 180px;"><div class="box" style=" color: red; background-color:blue; width: 50%;"></div><div class="box" style="color: aqua;background-color:brown;width: 50%; " style=" display: flex;flex-direction:column;"><div style="height: 50%; width:100%;display:flex;justify-content:space-between;"><div style="width:50%;background-color:red; display:flex;justify-content:center; margin: 0px;padding: 0px;"> <img style="width: 100%;height:100%;object-fit: cover;border: none; border-style: none;" src="C:\Users\Administrator\Pictures\images\2.png" alt="Your Image"></div><div style="width:50%;background-color:chartreuse;display:flex;justify-content:center;"><img style="width: 100%;height:100%;object-fit: cover;object-fit: cover;display: inline-block;border: none; border-style: none;" src="C:\Users\Administrator\Pictures\images\2.png" alt="Your Image"></div></div><div style="height: 50%; width:100%;display:flex;justify-content:space-between;""><div style="width:50%;background-color:chartreuse;display:flex;justify-content:center;"> <img style="width: 100%;height:100%;object-fit: cover;object-fit: cover;margin: 0 auto;" src="C:\Users\Administrator\Pictures\images\2.png" alt="Your Image"></div><div style="width:50%;background-color:red;display:flex;justify-content:center;"><img style="width: 100%;height:100%;object-fit: cover;object-fit: cover;margin: 0 auto;" src="C:\Users\Administrator\Pictures\images\2.png" alt="Your Image"></div></div></div></div>

希望能帮助到各位,大家的支持是我创作最大动力!现在待业中,希望大家能推荐一下工作。(专注.net C# 6年)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/527005.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

蓝桥杯嵌入式省赛模板构建——串口发送

介绍 串口发送&#xff1a;单片机发送数据给电脑 只需要掌握异步收发 PA9单片机发送数据&#xff0c;PA10单片机接收数据 波特率&#xff1a;每秒传输的二进制位数&#xff0c; 例&#xff1a;4800bps:每秒能传输4800个bit 由下图可知一帧 10个bit(加上启动位和停…

input中文输入法导致的高频事件

这是基本结构 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>中文输入法的高频事件</title&…

排查线上JVM CPU飙升使用率高和线程死锁问题

一、排查CPU飙升使用率高问题 在开始前新建一个 SpringBoot 项目构建CPU使用率高的场景&#xff1a; RestController public class JvmThread1Controller {ThreadPoolExecutor executor new ThreadPoolExecutor(10,15,2,TimeUnit.SECONDS,new LinkedBlockingDeque<>(5…

智慧城市的未来:利用数字孪生技术推动智慧城市的智能化升级

目录 一、引言 二、数字孪生技术概述 三、数字孪生技术在智慧城市中的应用 1、城市规划与建设 2、城市管理与运营 3、公共服务与民生改善 4、应急管理与灾害防控 四、数字孪生技术推动智慧城市的智能化升级的价值 1、提高城市管理的智能化水平 2、优化城市资源配置 …

2024年阿里云服务器个人一个月多少价格?5元/月

阿里云服务器一个月多少钱&#xff1f;最便宜5元1个月。阿里云轻量应用服务器2核2G3M配置61元一年&#xff0c;折合5元一个月&#xff0c;2核4G服务器30元3个月&#xff0c;2核2G3M带宽服务器99元12个月&#xff0c;轻量应用服务器2核4G4M带宽165元12个月&#xff0c;4核16G服务…

HTML静态网页成品作业(HTML+CSS)——花主题介绍网页设计制作(1个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有1个页面。 二、作品演示 三、代…

网络协议常见问题

网络协议常见问题 OSI&#xff08;Open Systems Interconnection&#xff09;模型OSI 封装 TCP/IP协议栈IP数据报的报头TCP头格式UDP头格式TCP (3-way shake)三次握手建立连接&#xff1a;为什么三次握手才可以初始化 Socket、序列号和窗口大小并建立 TCP 连接。每次建立TCP连接…

NeRF模型NeRF模型

参考视频&#xff1a;https://www.youtube.com/watch?vHfJpQCBTqZs&ab_channelVision%26GraphicsSeminaratMIT NeRF模型的输入输出: 输入: (x, y, z): 一个三维空间坐标,代表场景中的一个位置点(θ, φ): 视线方向,θ表示与y轴的夹角,φ表示与x轴的夹角,用两个角度可以…

win11家庭版docker和milvus

docker 1、官网下载docker文件Get Started | Docker&#xff0c;选择download for windows下载。 2、双击打开下载好的文件Docker Desktop Installer.exe&#xff0c;add shortcut to desktop选择√代表同意添加快捷键到桌面&#xff0c;如果不勾选就说明不创建快捷键&#x…

理解JavaScript中的WeakSet和WeakMap

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

活动图高阶讲解-01

14 00:00:36,200 --> 00:00:42,960 下面我们就来进入学习 15 00:00:42,960 --> 00:00:49,640 首先我们先花点时间 16 00:00:49,640 --> 00:00:54,560 从面上把活动图的历史等等 17 00:00:54,560 --> 00:00:56,640 概述的一些内容过一下 18 00:00:57,840 -->…

掌握重排和重绘,让你的网页飞得更高!

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…