div中用img引用的图片下面会自动占据5px的位置,怎么消除?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了div中用img引用的图片下面会自动占据5px的位置,怎么消除?相关的知识,希望对你有一定的参考价值。
就是会把div的高度撑高5px
参考技术A 在样式中将img标签设置成块显示即可、<style>
img
display:block;
</style> 参考技术B 写css之前写一些基础样式比较好例如:
*margin:0; padding:0;这句代码可能会解决你的问题
bodyfont-size:12px; font-family:"宋体"; color:#555555;
ul,ol,lilist-style-type:none;
imgborder:none;
atext-decoration:none; 参考技术C img下面会多出这个px。你加上imgdisplay:inline-block 参考技术D 看看图片是否清除了浮动 img margin:0;padding:0 第5个回答 2017-09-01 img设置vertical-align: middle;
在 React 中用 img 填充 div
【中文标题】在 React 中用 img 填充 div【英文标题】:Fill div with img in React 【发布时间】:2021-08-21 12:24:58 【问题描述】:我正在尝试用 img 填充 div(以下屏幕中的黑色区域)。
但是图像的比例不应该改变。 并且当div的大小根据浏览器的大小而变化时,应该通过相应的调整宽度或者调整高度来显示图片。 图像动态变化,所以我永远不知道它是高还是长。 例如
最后,目标是在不改变图像比例的情况下,使图像尽可能大。
下面是我开发的代码。
<div className="asset__item">
<a className="asset__img">
<img
src="/img/1.jpg"
/>
</a>
</div>
CSS
.asset__item
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
position: relative;
padding: 20px 20px 20px 20px;
width: 100%;
border-radius: 16px;
margin-top: 20px;
background: #202020;
.asset__item img
width: auto;
max-width: 100%;
请告诉我如何解决它。
我尽量不去修改asset__item的样式。 不过也可以在里面加个 div 代替。
【问题讨论】:
这能回答你的问题吗? How do I auto-resize an image to fit a 'div' container? 谢谢,但是这样比容器小的图像不会增加尺寸。 【参考方案1】:您可以尝试使用 object-fit : `
img
width: auto;
max-width: 100%;
object-fit:cover;
`
【讨论】:
【参考方案2】:我找不到只使用 CSS 的方法。所以我使用 JavaScript 直接将width
和height
分配给我的图像。我们应该处理 4 种不同的情况:
-
相册图片和相册屏幕
相册图片和纵向屏幕
人像图片和相册屏幕
纵向图片和纵向屏幕
我的imgObj
包含图像的初始width
和height
(我使用react-image-size 得到它们)。
这是代码:
const imageObj = useSelector((state) => state.imageHandling.imageObj);
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);
const handleImageSize = () =>
if (imageObj)
let w = 0;
let h = 0;
const ratio = imageObj.width / imageObj.height;
const theSameTypes = () =>
w = window.innerWidth;
h = window.innerWidth / ratio;
if (h > window.innerHeight)
h = window.innerHeight;
w = h * ratio;
;
if (imageObj.width > imageObj.height)
if (window.innerWidth > window.innerHeight)
theSameTypes(); //album picture and album screen
else
w = window.innerWidth; //album picture and portrait screen
h = w / ratio;
else
if (window.innerWidth > window.innerHeight)
h = window.innerHeight; // portrait picture and album screen
w = h * ratio;
else
theSameTypes(); // portrait picture and portrait screen
setWidth(w);
setHeight(h);
;
useEffect(() =>
window.addEventListener("resize", handleImageSize);
return () =>
window.removeEventListener("resize", handleImageSize);
;
, []);
useEffect(handleImageSize, [imageObj]);
【讨论】:
以上是关于div中用img引用的图片下面会自动占据5px的位置,怎么消除?的主要内容,如果未能解决你的问题,请参考以下文章
img外头包着a时底部出现的一小段高度的解决方法。图片水平垂直居中用css解决的方法。