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;
}

（上面显然不起作用，因为它将图像拉伸到尺寸，而不是有一个'包装'容器。

基本上，我希望图像具有预设的大小，以便将其放入。这可以这样做：

  <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;
}

图像不会拉伸。

Answer 2

您是否在寻找类似的内容： http://jsfiddle.net/abhitalks/pULZA/1/ ？

使用相同的标记：

<div class="cont">
    <img src="http://lorempixel.com/50/50" />
</div>

尝试更改小提琴中图像的大小。尝试制作http://lorempixel.com/350/350。希望这适合您在内部容器中限制图像大小的目的。

现在为CSS：

使用:after伪类生成 faux-container 。它实际上不是一个容器，但看起来像一个容器。这将帮助您不要更改现有标记。

.cont {
    border: 1px solid gray;
    width: 250px; height: 250px;
    line-height: 250px;
    position: relative;
    text-align: center;
}

.cont > img {
    border: 1px solid black;
    display: inline-block;
    max-width: 150px; max-height: 150px;
    vertical-align: middle;
    text-align: center;
}
.cont:after {
    content: "";
    display: block;
    position: absolute;
    top: 50px; left: 50px;
    width: 150px; height: 150px;
    border: 1px solid red;
    background-color: #ddd;
    z-index: -10;
}

使z-index为负数，使其落后于图像，从而显得像是一个容器。

否则，您唯一的选择是将标记更改为嵌套div。

<强>更新：

选中此项： http://jsfiddle.net/abhitalks/pULZA/2/

正如您所说，您希望将容器固定为150px，您可以使用该数字的一半（75px）来计算并相应地定位:after内容。因此，即使.cont尺寸发生变化，图像及其框架也将始终保持在中心位置。

使用CSS calc：

.cont:after {
    ...
    /*  to calculate center, 
        we halve the width to 75px and subtract it from 50% of parent 
    */
    top: calc(50% - 75px); left: calc(50% - 75px);
    width: 150px; height: 150px;
    ...
}

Answer 3

<强> HTML：

<div class="cont">
    <div>
        <img src="http://www.famfamfam.com/lab/icons/silk/icons/application_form.png" />
    </div>
</div>

<强> CSS：

.cont {
    width: 150px;
    height: 150px;
    background-color: green;
    padding: 25px;
}

.cont > div {
    width: inherit;
    height: inherit;
    background-color: grey;
    display:table-cell;
    vertical-align:middle;
    text-align: center;
}

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

如果我理解正确，这应该适合你。

如何在图像中包装容器

3 个答案: