css < a>标记的大小与其内部标记的大小不同< img>

pkln4tw6 于 2023-02-26 发布在其他

关注(0)|答案(7)|浏览(108)

我有以下基本HTML内容：

<div>
    <a href="...">
        <img src="..." width="81" height="75" ... />
    </a>
</div>

事实上，“A”标签的高度只有19px，而图像元素被设置为75px。
即使我手动将“A”标记的高度设置为75px，它也不会设置，并保持原样。
“A”标记周围的“DIV”元素获得“IMG”元素的精确尺寸，而无需手动或在任何地方设置它。
浏览器是Chrome最新版本。
如何正确设置“A”标签的高度，使其始终（自动）覆盖整个“IMG”元素？

css

来源：https://stackoverflow.com/questions/23041956/a-tag-is-not-at-the-same-size-of-img-tag-inside-it

7条答案

按热度按时间

lf5gs5x21#

尝试将display:inline-block添加到<a>元素。

赞(0）回复(0）举报 2023-02-26

5uzkadbs2#

对我有效的方法是在锚标记中添加一个z-index。

position: absolute; 
z-index: 2

赞(0）回复(0）举报 2023-02-26

vs91vp4v3#

如果inline-block声明不够，请检查line-height ...

<a href="" style="line-height: 1;">
   <img src="logo.jpg" alt="logo">
</a>

赞(0）回复(0）举报 2023-02-26

nwlls2ji4#

像这样修改代码（添加id s）：

<div>
    <a href="..." id="link">
        <img id="img" src="..." width="81" height="75" ... />
    </a>
</div>

试试这个javascript

document.getElementById("link").style.height=document.getElementById("img").height+"px";

赞(0）回复(0）举报 2023-02-26

2w3kk1z55#

在下面的链接上检查此演示
Demo link
这里运作良好
实际图像大小为734*459，仍在工作。

<div  >
<a href="#" >
    <img src="http://i.telegraph.co.uk/multimedia/archive/02369/potd-dummy-gull_2369858k.jpg" width="81" height="75"/>
</a>

赞(0）回复(0）举报 2023-02-26

oyxsuwqo6#

我尝试了所有答案的组合，但我必须在“a”块中合并行高，在图像块中组合垂直对齐。

<a href="#" style="line-height: 1;">
    <img id="myimage" src="path" style="vertical-align: bottom;"/>
</a>

赞(0）回复(0）举报 2023-02-26

bbuxkriu7#

对我来说，diplay: contents是有效的，因为具有此属性的元素不会生成带边距/填充的框。
从display: contents doc开始：
这些元素本身并不产生一个特定的盒子，而是被它们的伪盒子和子盒子所取代。

赞(0）回复(0）举报 2023-02-26

我来回答

css < a>标记的大小与其内部标记的大小不同< img>

7条答案

相关问题

热门标签

最新问答