javascript - CSS 选择器高度 100% 和宽度 :auto, 首先失败然后正常工作

Question

我正在为 width:auto 的情况寻找解决方法CSS 规则最初无法在 Chrome、Safari 和 Opera 中应用。 (在最新版本的 Firefox 中没有问题。目前仅在 Mac 上进行了测试。)

首先我将描述症状，然后我将描述问题。

症状

在网页中，我希望图像完全填满窗口。当访问者调整窗口大小时，图像将保持其比例并扩展或收缩以填充整个高度或整个宽度。

如果你打开this page在您的浏览器中，然后调整窗口大小，您应该会看到图像的灰色边框始终可见，无论是在窗口的两侧还是在顶部和底部。图片的宽高比为 2:1。

如果您在浏览器窗口的宽高比为 2:1 或更高时加载页面，则会出现此问题。要进行测试，您可以将窗口设为正方形 (1:1)，然后重新加载页面。如果将窗口变高，一切正常，但如果将窗口变短，图像就会变形:变成椭圆形。如果您继续缩短窗口，直到其比例为 2:1 或更宽，问题就会消失。

让窗口比 2:1 宽再变短并不能解决问题。

问题

基本原理是使用下面的 CSS，加上在 window.onresize 上运行的 JavaScript根据窗口的宽度和高度与图像的比例来切换图像的类。

html, body {
height: 100%;
margin: 0;
}

img.full-height {
height:100%;
width:auto;
position: fixed;
left: 50%;
 /* bring your own prefixes */
transform: translate(-50%, 0);
}

img.full-width {
height:auto;
width:100%;
position: fixed;
top: 50%;
/* bring your own prefixes */
transform: translate(0, -50%);
}

这在我测试过的所有浏览器中都运行良好。但是，就我而言，我想在窗口的右下角包含图像的签名，并且我还希望在与全尺寸图像相同的父“”中拥有此签名。

因为上面的CSS使用了transform在 parent 身上<div> , 不可能使用 position: fixed对于 parent 的任何 child <div> .我使用的 HTML 正文和 CSS 如下所示。

如果有人能帮我找到解决所有浏览器问题的方法，我将不胜感激。

正文

<div class="shrinkwrap">;
  <div class="shrinkwrap full-width">
    <img src="circle.png" alt />
  </div>
  <p class="signature">Signature</p>
</div>

CSS

html, body {
height: 100%;
margin: 0;
}

div.shrinkwrap {
display:inline-block;
position: fixed;
}

div.full-height,
div.full-height img{
height:100%;
width:auto;
}

div.full-height img{
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}

div.full-height{
left: 50%;
}

div.full-width {
height:auto;
width:100%;
top: 50%;

-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
}

div.full-width img{
width:100%;
height:100%;
}

p.signature {
position: fixed;
right: 0;
bottom: 0;
}

Answer 1

如果您需要要求用户保持 2:1 的比例，这听起来很有问题并且容易出错。

您是否尝试过使用 background-size 属性？

背景大小:覆盖；

将背景图像缩放到尽可能大，以便背景区域完全被背景图像覆盖。背景图像的某些部分可能在背景定位区域内不可见。

背景大小:包含；

将图像缩放到最大尺寸，使其宽度和高度都能适应内容区域。

例子:

div{
  color:white;
  margin:10px;
}

.cover {
    background:red;
    background-image:url('http://i.imgur.com/PnD8bZ9.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    width:500px;
    height:500px;
}

.contain {
    background:yellow;
    background-image:url('http://i.imgur.com/PnD8bZ9.jpg');
    background-repeat:no-repeat;
    background-size:contain;
    width:500px;
    height:500px;
}

<div class="cover">cover 500x500 div</div>

<div class="contain">contain 500x500 div</div>