将图片放在max_width，max_height分隔框内

Question

我希望图像位于“由max_width和max_height分隔的框内”。

相反，图片会移到下面的文本上方/下方。

在IE10及更高版本中也应该工作。

.image {
    max-height: 9.75rem;
    max-width: 14.625rem;
    margin: 0 0.75rem 0 0;
}

.image img
    max-height: 90%;
    max-width: 90%;
}

.text {
    color: red;
    font-size: 14px;

<div class="section">
     <h3 class="title">Image</h3>
     <div class="image">
          <img src="http://via.placeholder.com/350x350"/>
     </div>
 </div>
            
<div class="section">
   <h3 class="title">Item</h3>
   <div class="text">Lorem ipsum sic dolores</div>
</div>

Answer 1

即使您设置了max-width或max-height，也需要在此处具有指定的width或height属性。

.image {
  margin: 0 0.75rem 0 0;
}

.image img {
  max-height: 9.75rem;
  max-width: 14.625rem;
}

.text {
  color: red;
  font-size: 14px;
}

<div class="section">
  <h3 class="title">Image</h3>
  <div class="image">
    <img src="http://via.placeholder.com/350x350" />
  </div>
</div>

<div class="section">
  <h3 class="title">Item</h3>
  <div class="text">Lorem ipsum sic dolores</div>
</div>

Answer 2

.image {
  max-height: 9.75rem;
  max-width: 14.625rem;
  margin: 0 0.75rem 0 0;
}
.image img {
  display:block;
  max-height: 9.75rem;
}
.text {
  color: red;
  font-size: 14px;
}

<div class="section">
  <h3 class="title">Image</h3>
  <div class="image">
    <img src="http://via.placeholder.com/350x350"/>
  </div>
</div>
<div class="section">
  <h3 class="title">Item</h3>
    <div class="text">Lorem ipsum sic dolores</div>
</div>

Answer 3

我认为您应该从max-width容器继承max-height的{​​{1}}和img值。请查看这是否是您要查找的内容：

div

.image {
    max-height: 9.75rem;
    max-width: 14.625rem;
    margin: 0 0.75rem 0 0;
}

.image img{
    max-height: inherit;
    max-width: inherit;
}

.text {
    color: red;
    font-size: 14px;
}