10

我希望我的图像随着窗口高度的变化而调整大小，同时保持包含的 div 收缩包裹图像。我尝试使用：

<div>
    <img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="">
</div>

html, body {
    height: 100%;
    width: 100%;
}

div {
    height: 90%;
    background-color: black;
    display: inline-block;
}

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

但它似乎没有按预期工作。div不缩水。一旦我在调试器中使用 css 属性，它实际上就可以了。

这是小提琴（尝试调整结果面板的大小）

更新：

现在这很奇怪。自从我第一次发布这个问题以来，浏览器的行为发生了变化。最初（Chrome）当我调整窗口大小时，图像会按预期按比例缩小，但包装 div 将保持其原始宽度。现在发生的事情（Chrome 更新？）是图像不会水平缩小，而且 div 也不会缩小。

我用最新的 Safari 和 Firefox 试了一下。两者都缩小图像但保持原始 div 宽度。因此，请在其他浏览器上检查您的解决方案。

更新#2：

div 必须保持块类型，因为我需要将其他元素放置在图像的角落。

4

9 回答 9

3

你只需要保持你的形象max-height是 100%。而已。

这是工作解决方案

的HTML：

<div>
    <img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="">
</div>

CSS：

html, body {
    height: 100%;
    width: 100%;
}

div {
    height: 90%;
    background-color: black;
    display: inline;
}

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

编辑

CSS为类更新img以使图像适合完整的 div。这是编辑的工作解决方案。

img {
    max-height: 100%;
    max-width: 100%;
    height: 100%;
    display:block;
}

希望这可以帮助。

于 2013-05-24T05:38:02.370 回答
3

我想你将不得不求助于 JavaScript：

$(window).on('resize', function (){ 
    $('div').width($('img').width());
});

JSFIDDLE

于 2013-05-24T05:36:36.893 回答
1

我对你的小提琴有点尝试，但我不认为浏览器会div根据它内部图像的宽度改变它的宽度来改变它的宽度，我已经尝试了一些东西但无法得到它工作。

但是，我可以建议另一种将元素放置在自动调整大小图像的角落的方法。与其将这些元素放在div也包含图像的 a 中，不如将图像浮动并在图像div的右侧和左侧以固定宽度浮动一些 's ，然后div通过在它们上设置一些负边距。

这是一个jsFiddle演示这种方法的示例。当您调整结果窗口的大小（从而改变主图像的大小）时，您会看到图像停留在主图像的角落。

HTML

<div class="right">
    <img src="..." />
    <img src="..." />
</div>
<img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="" />
<div class="left">
    <img src="..." />
    <img src="..." />
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
}
img {
    height: 90%;
    float: left;
}
div {
    float: left;
    width: 40px;
    position: relative;
    z-index: 1;
    height: 90%;
}
div.left {
    margin-left: -40px;
}
div.right {
    margin-right: -40px;
}
div > img {
    padding: 3px;
    border: 2px dashed blue;
    width: 30px;
    height: 30px;
}
div > img:last-child {
    bottom: 0px;
    right: 0px;
    position: absolute;
}
于 2013-05-30T07:36:54.133 回答
0

如果我理解正确，您想按高度调整图像大小但保持比例大小？

如果是这样，请使用：

img {
height: 100%;
display: inline-block;
}

您可能想使用 display: block; 同样，取决于您的需求。

小提琴：http : //jsfiddle.net/zhyv9/38/

于 2013-05-31T02:05:16.630 回答
0

当您以 % 为 div 提供宽度和高度时，它会根据页面大小调整大小。并且以 % 为单位的图像大小是相对于 div 的宽度和高度的。我将 div 高度保持在可用空间的 90%，宽度保持在 50%。图像的高度和宽度均为 90%，因此您可以看到图像和 div 部分的大小调整。

html, body {
height: 100%;
width: 100%;
}

 div {
height: 90%;
background-color: black;
width:50%;
}

img {
height: 90%;
width: 90%;
}
于 2013-05-24T05:46:01.437 回答
0

您必须更新为图像目的编写的 css

img {
    max-height: 100%;
    max-width:100%;
}
于 2013-05-30T13:00:13.380 回答
0

添加这个小技巧对我有用。据我了解，它强制浏览器重绘/重排其内容。小提琴。我不明白为什么浏览器不能自动完成。在 Firefox、Chrome 和 Safari 上测试。

window.onresize = function() {
    $(".thumb").each(function() {
        this.style.display = "none";
        this.offsetWidth;
        this.style.display= "inline-block";
    })
}
于 2013-05-31T19:25:19.900 回答
0

我已经更新了fiddle, Img 标签自我关闭，有时可能会导致错误..，

并且如果图像具有指定的大小高度和宽度，那么它也会调整大小，并且当我放大/缩小时，相应的 div 高度会增加/减少 90%

我希望这是答案，因为我已经了解包装和重新调整大小，如果不起作用，请回复..

于 2013-05-31T10:12:46.233 回答
0

您想将图像宽度设置为 100%。用这个。

img {
 height: 100%;
 width: 100%;
}
于 2013-05-24T05:44:27.527 回答