Html 内部带有 img 标签的 div 高度错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10656570/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Wrong height of div with img tag inside
提问by user1403825
I have a div with an image tag inside, and the div height appears to be a little larger than the image.
我有一个带有图像标签的 div，div 高度似乎比图像大一点。
I could fix this problem by setting a specific height for the div (the same as the image), but I'm working with a responsive layout, and I don't want to set a specific height for the div, so that when the browser window scales (for example in mobile devices) the div will scale and maintain the ratio.
我可以通过为 div 设置特定高度（与图像相同）来解决此问题，但我正在使用响应式布局，并且我不想为 div 设置特定高度，因此当浏览器窗口缩放（例如在移动设备中）div 将缩放并保持比例。
I need that the div height to be exactly as the image height.
我需要 div 高度与图像高度完全相同。
This is the scenario:
这是场景：
<div class='box'><img src='image.jpg'></div>
<div class='box'><img src='image.jpg'></div>
Css is:
CSS是：
img {
height: auto;
max-width: 100%;
width: auto;
}
img {
height: auto;
max-width: 100%;
width: auto;
}
Does anybody know how to fix this problem?
有谁知道如何解决这个问题？
回答by Brodie
The problem is that the image's natural styling gives it a little bit of margin on the bottom making it ugly to say the least. An easy fix is to just display: block, float: left on the image and the space should go away.
问题是图像的自然样式使其底部有一点边距，至少可以说很难看。一个简单的解决方法是只显示：块，浮动：留在图像上，空间应该消失。
either that or you can play around w/ the border-collapsing on the image if you really don't want to float it. However, that's a solution that would probably cause more problems in the end.
如果你真的不想浮动它，或者你可以在图像上使用边框折叠。但是，这是一个最终可能会导致更多问题的解决方案。
so it's going to end up being something like
所以它最终会变成这样
.box img {
display: block; /*inline block would be fine too*/
float: left;
}
hope that helps.
希望有帮助。
回答by Konstantin Barabator
The easiest way is to determine the vertical alignment of the image.
最简单的方法是确定图像的垂直对齐方式。
img {
vertical-align:middle;
}
回答by user2957214
use img: block. that's all....
使用 img: 块。就这样....
回答by David says reinstate Monica
To have the divbe the same element as its child imgelement:
要div使其元素与其子img元素相同：
div {
display: inline-block;
padding: 0;
}
div img {
margin: 0;
}
I'd suggest, though, that you use a spaninstead of a div(that way it'll automatically 'collapse' its width to that of its contents:
不过，我建议您使用 aspan而不是 a div（这样它会自动将其宽度“折叠”为其内容的宽度：
span {
padding: 0;
}
span img {
margin: 0;
}
回答by madhu131313
The simple modern solution that works is as follows
简单的现代解决方案如下
div {
display: flex;
}
回答by InspiredBy
Are you talking about just setting the size of the Div ? In css:
你是说只是设置 Div 的大小吗？在 CSS 中：
.box
{
height: 10px;
width:10px;
}
You can also not set the image in your code but set the "box's" DIV background image to that image instead:
您也不能在代码中设置图像，而是将“框”的 DIV 背景图像设置为该图像：
.box
{
height: 10px;
width:10px;
background:url('/imgURL/filename.gif') white no-repeat;
}
(10px is just a random number ofcourse. Set it to whatever size you need)
（当然，10px 只是一个随机数。将其设置为您需要的任何大小）
