1

我想创建一个响应式 div( box1)，它应该自动适应其内容大小，并且我对该内容有一个限制，它不应该超过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不会超过box1宽度和高度。

现在
1）如果图像高于box1宽度和高度，600x300px那么750x750px在这种情况下图像应该box1适合600x300px

2）如果图像小于600x300px 假设200x150px那么box1应该自动调整到图像大小。

如何做到这一点？我的代码对这个概念有什么问题？有人可以帮忙吗？

4

4 回答 4

4

这是使用 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-blockfor .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/

于 2013-07-03T15:07:03.457 回答
2 
img {
    width: 100%;
    height: auto;
    max-height: 100%;
}

应该工作（我假设你想保持纵横比）

于 2013-07-03T14:22:07.030 回答
1

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

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

于 2013-07-03T14:28:13.980 回答
1

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

img {
    max-width: 600px;
    max-height: 300px;
    height: auto;
    width: 100%;
    padding: 5px;
    background: chocolate;
}
于 2013-07-03T14:31:34.710 回答