html - 如何在图像中包装容器

Question

所以我有一个类，让我们调用 cont 来保存很多东西，包括图像。

现在我想为图像设置样式。我们可以使用 .cont 在 div 中设置图像样式:

.cont>img {
    ...
}

但是，在我的 cont div 中，我希望另一个框占据 150px*150px，图像位于“内部”。澄清一下，我想要一个 150px*150px 的框，其中包含一个可能更小的图像:

    [         ]
    [  [   ]  ]
    [  [img]  ]
    [  [   ]  ]
    [         ]

基本上，在普通的 css 中，可以这样做:

.cont-image {
   width:150px;
   height:150px;
}

但这样做的缺点是必须将 cont-image 类添加到每个图像。

这是否可以自动继承和设置样式™？有点像:

.cont>img {
   width:150px;
   height:150px;
}

(上面显然不起作用，因为它将图像拉伸(stretch)到维度，而不是有一个“包装器”容器。

基本上，我想让一张图片有一个预设大小，它可以被放入其中。这可以像这样完成:

  <div style="width:150px;height:150px">
    <img src=""></img>
  </div>

所以我有一个 150*150 的 div，可变大小的图像在其中。但是，我希望通过仅对图像本身设置样式(没有外部 div)来做到这一点:

<img style="???" src=""></img>

Answer 1

您是否尝试过更改为最大宽度/高度？

.cont>img {
   max-width:150px;
   max-height:150px;
}

图像不会有拉伸(stretch)。