Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >CSS移除图像周围的空白

CSS移除图像周围的空白
EN

Stack Overflow用户
提问于 2020-07-20 11:01:54
回答 4查看 1.3K关注 0票数 0

我直接在我的网站上使用来自亚马逊的图片,所以我不能在图像编辑程序中手动修剪它。图像周围是大量的空白,这是令人讨厌的,因为在这个图像下,有文字。这使得图像与其下的文本之间的差距非常大(因为图像底部有空白处)。

而且,每个图像都包含不同数量的空白,所以我不能仅仅设置一个固定的负margin-bottom

我知道mix-blend-mode: multiply;使空白透明,但是空白仍然存在,因为白色(现在是透明的部分)仍然占用布局中的空间。

如何使白色部分消失,以便其他html元素可以使用该空间?

这里有一个代码库:https://codepen.io/AlessioG/pen/VweqMEg

EN

回答 4

Stack Overflow用户

发布于 2020-07-20 11:25:56

您可以使用对象匹配css属性来裁剪图像.

将容器div设置为您希望图像的裁剪大小,并将图像设置为相同的宽度和高度,然后在图像上使用object。

代码语言:javascript
运行
AI代码解释
复制
<div id="crop-container">
    <img id="crop-image">
</div>

#crop-container {
    width:200px;
    height:200px;
}

#crop-image {
    object-fit:cover;
    width:200px;
    height:200px;
}
票数 0
EN

Stack Overflow用户

发布于 2020-07-20 11:36:00

只需使用对象匹配,然后按比例分配比高度宽更高的数字。请不要使用元素名,如div或id名称等,因为这是很难覆盖的。

代码语言:javascript
运行
AI代码解释
复制
.image {
  margin: 0;
  object-fit: cover;
  width: 250px;
  height: 200px;
}

.header-two {
  margin: 10px;
  font-weight: bold;
  display: block;
  font-size: 20px;
}
代码语言:javascript
运行
AI代码解释
复制
<div class="container"> 
  <img class="image" src="https://i.imgur.com/l2QrzBg.jpg">
  <h2 class="header-two">This is a text</h1>
</div>

票数 0
EN

Stack Overflow用户

发布于 2022-03-19 16:15:15

如果您有CSS,您可以为img分配一个显示块。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/63002184

复制
相关文章
如何将Pyecharts绘制的 "地图" 展示在百度地图中?
Pyecharts绘图的确很棒,尤其是地图,那么将你的数据指标,展示在百度地图中,有时怎么样的一种感觉?
陈晨135
2021/12/25
1.2K0
如何将Pyecharts绘制的 "地图" 展示在百度地图中?
图像处理: 如何将 像素值 控制在 值域[0, 255]
在做计算机视觉方向项目的时候,往往需要进行图像处理。但是在此过程中,常常会遇到 对 像素值 进行 变换计算 后,像素值 超出 值域区间 [0, 255] 的情况。再加上计算过程中各自 float型, int型, uint型 的问题都跳出来作乱,在初期做图像相关项目,深为此苦恼。后来自己写了一段万能代码模板,成功地解决了此类问题。
JNingWei
2018/09/28
2.5K0
图像处理: 如何将 像素值 控制在 值域[0, 255]
工具指南|如何将本机CFS数据快速上传COS
腾讯云对象存储COS提供了多种工具支持将本地数据上传到COS,如COSBrowser、COSCMD、COS Migration、COSFS等等,本文探讨Linux环境下,如何将机器上挂载的文件存储CFS的数据快速迁移到COS。
覃春善
2021/03/18
2.2K0
在图中添加多边形
在matplotlib中有一个子模块patches, 提供了绘制各种多边形的功能,常用的多边形及其画法如下
生信修炼手册
2020/09/23
6360
在图中添加多边形
Win10: 在截图中添加红框
文章背景: 在工作中,很多时候需要用到Win10原生的截图工具,然后在截图中添加红框进行强调。对于Win10系统,可以通过按Windows 徽标键‌+ Shift+ S,快速调出截图工具,但无法在截图中添加红框,需要借助画图工具进行实现。
Exploring
2023/08/17
13.8K0
Win10: 在截图中添加红框
【译】在列表视图中处理空值
本篇文章主要针对两类开发者。第一个是曾遇到过IllegalArgumentException: Path must not be empty问题的开发者。第二个则是当ListView使用了未被完整加载的图像,应用程序仍能正确运转的开发者们。
小鄧子
2018/08/20
1.3K0
手把手教你在本机安装spark
最近由于一直work from home节省了很多上下班路上的时间,加上今天的LeetCode的文章篇幅较小,所以抽出了点时间加更了一篇,和大家分享一下最近在学习的spark相关的内容。看在我这么拼的份上,求各位老爷赏个转发。。。
TechFlow-承志
2020/04/14
4.4K0
C++在视图中显示缩略图
将任意形式文件已缩略图形式显示在视图中 //pWnd为当前客户区视图 CWnd* pWnd; pWnd=this; CDC* pDC=pWnd->GetDC(); HDC hDC = pDC->m_hDC; HWND hwnd=pWnd->GetSafeHwnd(); CImage image; //m_ViewRect 为当前客户区 CRect m_ViewRect; GetClientRect(&m_ViewRect); //strFilePath为影像绝度路径,包含文件名 image.Load(strFilePath);
用户7886150
2021/02/13
7120
在 SwiftUI 视图中打开 URL 的若干方法
本文将介绍在 SwiftUI 视图中打开 URL 的若干种方式,其他的内容还包括如何自动识别文本中的内容并为其转换为可点击链接,以及如何自定义打开 URL 前后的行为等。
东坡肘子
2022/07/28
7.9K1
在 SwiftUI 视图中打开 URL 的若干方法
私有PaaS在乐视的实践
PaaS在云平台中的作用 * 打通接入层、应用层、服务层 * 承载了云平台95%以上的业务
字母哥博客
2020/09/23
5270
私有PaaS在乐视的实践
在Kubernetes上使用Openldap做集中认证
LDAP是Lightweight Directory Access Protocol的缩写,提供LDAP服务的软件有很多商业上获得成功的,其中以MS的AD和Redhat的NDS(Netscape directory server)使用最为广泛,而开源领域则是OpenLdap了,为了集成认证后面需要的gitlab,jenkins,nexus,harbor等,因此我们在准备在kubernetes上部署一下openldap和openldap的界面管理工具phpldapadmin.
公众号: 云原生生态圈
2020/06/15
1.7K0
在Kubernetes上使用Openldap做集中认证
旷视科技|商用端侧Raw图像降噪方案
近年来,基于深度学习的图像降噪方法取得了前所未有的成功,同时在多个公开数据集上“霸榜”。然而,这些SOTA方法往往存在计算量过大,难以直接部署在手机端。为解决上述问题,该文作者提出一种轻量型、高效网络用于RAW图像降噪,它可以很好的在主流手机设备上运行,同时生成高质量的降噪结果。该文方法成功的关键有两点:
AIWalker
2020/09/14
1.6K0
旷视科技|商用端侧Raw图像降噪方案
好文速递:预测硝化与固定化的比率以反映全球氮流失的潜在风险
硝化和固定化争夺土壤铵(NH4+);这两个过程的相对优势被认为反映了土壤中氮流失的潜在风险。在这里,我们编译了一个数据库并开发了一个随机梯度提升模型,以根据硝化与固定化的比率 (N/I) 来预测氮损失的全球潜在风险。然后我们进行了荟萃分析来评估常见管理实践对 N/I 比的影响。结果表明,土壤N/I比随气候带和土地利用而变化。土壤全碳、全氮、pH、化肥施氮量、年平均气温、年平均降水量是影响土壤氮肥比的重要因素。荟萃分析表明,生物炭、秸秆和硝化抑制剂的施用分别使土壤 N/I 比降低了 67%、64% 和 78%。退耕还林和退耕还草使土壤氮肥比分别降低了 88% 和 45%。然而,施氮肥使土壤 N/I 比增加了 92%。我们的研究表明,土壤 N/I 比及其相关的氮流失风险水平与具有高度空间异质性的长期土壤和环境特性高度相关。
一个有趣的灵魂W
2021/07/05
4680
好文速递:预测硝化与固定化的比率以反映全球氮流失的潜在风险
Google在情报搜集中的基础技巧
​ Google Hacking 是指使用特定的高级的google搜索语法,收集渗透测试目标的信息,查找目标的配置缺陷和漏洞脆弱点等;重要记住的是:Google浏览器是最标准的(完全符合W3C标准)的浏览器,FireFox则是最安全插件扩展功能最为全面的浏览器(ps:没有绝对的阿暖哦),正是由于以上两点原因,所以Google和FireFox浏览器是“安全人员”最受欢迎的凉快浏览器。
Mirror王宇阳
2020/11/13
7580
如何通过VPC在本机搭建局域网
前几天在家里测试一个基于WS-AT的分布式应用,但是连接公司网络的VPN出现了问题,不得不采用VPC在本机搭建一个局域网。虽然以前也做过这样的尝试,可能是很久没有弄过了,一些细节记不清了,所以也折腾了好一阵子。在这里,我特意写一篇文章来介绍基于VPC搭建局域网的整个步骤,没有什么技术含量,只当给具有相同需要的朋友多一个参考。 我现在的Host Machine为Windows 7 Ultimate (X64) ,Virtual Machine为Windows Server 2008 (X86),都是现成的。本
蒋金楠
2018/01/16
2.4K0
如何通过VPC在本机搭建局域网
日本机器人“赢在技术输在商业” 谁之过?
据《金融时报》网站报道,去年当谷歌收购由2位日本机器人工程师创办的一家微型新创公司Schaft时,让人们对日本面临的威胁突然有了新的认识。包括苹果和亚马逊等新科技公司对机器人技术日益感兴趣。 时
机器人网
2018/04/13
7070
日本机器人“赢在技术输在商业” 谁之过?
眼睛是心灵的窗户,更是用户体验设计的利器
眼动追踪是一种旨在帮助研究人员理解视觉注意的技术。通过眼动追踪可以检测到用户在某个时间注视着哪里,注视多久以及眼球运动的轨迹。
博文视点Broadview
2020/06/11
9020
如何将Postman API测试转换为JMeter以进行扩展
许多测试工程师使用Postman进行API测试自动化。他们发现端点,发出请求,创建测试数据,运行回归测试,使用Newman等实现API测试的持续集成。但是,Postman有一定的测试限制。希望获得更多负载测试能力的开发人员,DevOps和QA工程师可以将其Postman测试转换为JMeter。这篇博客文章将解释何时建议将Postman转换为JMeter,并逐步说明如何实现。
用户8460142
2023/07/07
5080
如何将Postman API测试转换为JMeter以进行扩展
Jupyter如何将numpy数据以图像形式展现?
<footer style="color:white;;background-color:rgb(24,24,24);padding:10px;border-radius:10px;"><br>
marsggbo
2019/01/18
8460
Jupyter如何将numpy数据以图像形式展现?
点击加载更多

相似问题

如何将表单垂直居中以反映本机

10

视口总是集中在较大的背景图像上。

22

在视图中响应本机移动图像

31

本机本机:未反映数据更改。

23

在视口中显示图像,如果不在视图中则消失。

12
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档