CSS 选择器高度 100% 和 width:auto，首先失败然后正常工作

Question

我正在寻找一种解决方法，以解决 width:auto CSS 规则最初无法在 Chrome、Safari 和 Opera 中应用的情况。（在最新版本的 Firefox 中没有问题。目前仅在 Mac 上测试过。）

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

症状

在网页中，我想要一张图片完全填满 window。当访问者调整 window 大小时，图像将保持其比例并扩展或收缩以填充全高或全宽。

如果您在浏览器中打开 this page，然后调整 window 的大小，您应该会看到图像的灰色边框始终在 [=74= 的两侧可见] 或在顶部和底部。该图像的 width:height 比率为 2:1。

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

先让 window 比 2:1 宽，然后再缩短它并不能解决问题。

问题

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

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

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

因为上面的 CSS 在父 <div> 上使用 transform，所以不可能对父 [=18] 的任何子级使用 position: fixed =].我使用的 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: cover;

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

background-size: contain;

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

示例：

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>

CSS 选择器高度 100% 和 width:auto，首先失败然后正常工作

CSS selector height 100% and width:auto, first failing and then working correctly

javascript

html

css

transform