用html拟合图像
用html拟合图像
提问于 2020-01-09 08:13:38
如何在蓝色矩形中匹配图像？我试过调整图像的大小，但是图像会模糊。
下面是我的代码：
<body>
<div style="background-color:lightgrey; font-size:30px; display:inline-block;">
<!-- Text -->
Our PCBA products are used in the audio, communication, computer peripheral,<br>
home electronics, and entertainment industries. As existing markets grow and new<br>
ones emerge, SCOPE is constantly expanding its resources and capabilities to<br>
meet its customers' new and current needs. SCOPE practices selective investment<br>
in the best and latest in manufacturing equipment as it continues to strive for<br>
excellence in the electronics industry to provide a truly cost effective one-stop<br>
manufacturing facility for high quality products and services.
<!-- ----------------------------------------------------------------------------- -->
</div>
<div style="display:inline-block; position:absolute; top:99px; left:1000px">
<img src="Company.jpg" style="width:60%;">
</div>
</body>回答 4
Stack Overflow用户
回答已采纳
发布于 2020-01-09 08:32:43
好了伙计们。用Hadi Mir的建议解决这个问题。必须使用“对象匹配；填充”。这是我使用的代码。
<img src="Company.jpg" style="width:535px; height:240px; object-fit: fill;">Stack Overflow用户
发布于 2020-01-09 08:16:11
像这样改变你的形象：
<img src="Company.jpg" style="width:100%; object-fit: cover;">Stack Overflow用户
发布于 2020-01-09 08:27:19
您可以使用object-fit: cover;
CSS对象适配属性
用于指定如何调整或调整大小以适应其容器。
<div style="display: flex">
<div style="background-color:lightgrey; font-size:30px; display:inline-block;">
Our PCBA products are used in the audio, communication, computer peripheral....
</div>
<div style="height: 200px">
<img src="Company.jpg" style="object-fit: cover; width: 100%; height: 200px">
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59659654
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号