Question

我想创建一个响应div（box1），它应该自动适应其内容大小，并且我对该内容的限制不应超过{{1的特定值（宽度和高度）我在这里给box1。

以下是代码和示例

600x300

我使用了.box1 { width:auto; height:auto; background-color:chocolate; margin-left:auto; margin-right:auto; max-width: 600px; max-height:300px; padding:5px; }和max-width :600px;，因此根据我的信念，其中的内容不会超过max-height:300px;。

box1

此处.box1 img { max-width: 100%; max-height: 100%; }内的图片不会超过box1宽度和高度。

现在
1）如果图片高于box1宽度和box1的高度，请说600x300px在这种情况下，图片应该适合750x750px box1

2）如果图像小于600x300px，请说600x300px，200x150px应自动调整为图像尺寸。

如何实现这一目标？我的代码对这个概念有什么不对？任何人都可以帮忙吗？

Answer 1

以下是使用CSS

进行此操作的一种方法

考虑以下HTML，我包括四个各种宽高比的图像，以说明这是有效的。 .wrap元素用于显示您可以将图像置于其父块中。

<div class="wrap">
    <div class="box1">
        <img src="http://www.placekitten.com/500/500">
    </div>
</div>
<div class="wrap">
    <div class="box1">
        <img src="http://www.placekitten.com/800/200">
    </div>
</div>
<div class="wrap">
    <div class="box1">
        <img src="http://www.placekitten.com/200/800">
    </div>
</div>
<div class="wrap">
    <div class="box1">
        <img src="http://www.placekitten.com/200/200">
    </div>
</div>

诀窍是为display: inline-block设置.box1，这将迫使它缩小以适应受最大宽度和最大高度约束的内容。

.box1 {
    width:auto;
    height: auto;
    max-width: 600px;
    max-height: 300px;
    background-color:chocolate;
    padding:5px;
    display: inline-block;
}

要使图像正确缩放，只需继承max-width和max-height值：

.box1 img {
    vertical-align: top;
    max-width: inherit;
    max-height: inherit;
}

使用vertical-align: top清除图像标记附近的任何空白区域。

最后，由于.box1是一个内联块，您可以使用text-align: center将其置于其父容器中：

.wrap {
    border: 1px dotted gray;
    margin: 1.00em 0;
    text-align: center;
}

演示小提琴位于：http://jsfiddle.net/audetwebdesign/hpbdC/

Answer 2

img {
    width: 100%;
    height: auto;
    max-height: 100%;
}

应该有用（我假设你想要保持宽高比）

Answer 3

默认情况下，box1被视为display：block元素。如果将该显示类型更改为内联块（例如：display：inline-block），则将其视为可调整项。

请记住，您将框的最大高度设置为300px。因此，图像的最大高度为300。对于750像素×750像素的图像，它将被调整为300像素×300像素的图像（框也是如此）。

Answer 4

为什么需要包装div？您只需设置图像样式即可实现此目的：http://jsfiddle.net/Rv7JG/1/

img {
    max-width: 600px;
    max-height: 300px;
    height: auto;
    width: 100%;
    padding: 5px;
    background: chocolate;
}

如何使用img创建响应式div？

4 个答案: