Question

我有一个固定高度的div，其中包含带有一些文本和img元素的span。如何将img高度设置为等于div高度减去跨度高度？

示例代码：

<html>
<head>
<style type="text/css">
div { height: 100px; width: 800px; border-style:solid;}
img { display: block}
</style>

</head>
<body>
<div>

<span>hello world</span>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>

</div>
</body>
</html>

编辑：注意：高度/宽度是固定值，但是是未知变量。

Answer 1

如果flexbox是一个选项，您可以将其添加到div：

  display: flex; // set a flexbox container
  flex-direction: column; // column placement
  align-items: flex-start; // prevent default stretching in cross-axis (horizontal)

并将max-height: 100%和min-height: 0添加到图片中（同时将min-height: 0添加到span） - 请参阅下面的演示：

div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100px;
  width: 800px;
  border-style: solid;
}

img {
  display: block;
  min-height: 0;
  max-height: 100%;
}
span {
  min-height: 0;
}

<div>
  <span>hello world</span>
  <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</div>

Answer 2

好的，我亲自尝试过。为什么高度因为

而下降了一点点

<p>Hello World</p>所以它会创建一个空格

代码：

<html>
<head>
<style type="text/css">
div { height: 100px; width: 800px; border-style:solid;}
img { display: block;width:100%;height:100%;}
</style>

</head>
<body>
<div>

<span>hello world</span>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>

</div>
</body>
</html>

Answer 3

在你的css中添加这个，在你的img中加100％以适应你的div的高度。

img{ 
display: block;
height: 100%;
}

这适用于您的文字，但如果您想在div中使用图像，则可以在文本中使用绝对值。

span{
position: absolute;
}

Answer 4

尝试像这样使用CSS3 box-sizing property。

div {
  height: 100px; 
  width: 800px; 
  border-style:solid;
  box-sizing: border-box;
}

关于你html：

<div>

   <span>Lorem Ipsum is including versions of Lorem Ipsum</span>
   <div>
      <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
   </div>

</div>

Answer 5

我已经使用css calc属性执行了此操作，请查看此代码段

img {
    display: block;
    max-height: calc(100% - 20px);
}

div {
   height: 100px;
   width: 800px;
   border-style: solid;
   float: left;
}
img {
   display: block;
   max-height: calc(100% - 20px);
}

<div> 
	<span>hello world</span> 
	<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/> 
</div>

如何设置img大小不溢出？

5 个答案: