Html 一个突破其div容器的图像，位于菜单上方

我试图生成一个页面，根据屏幕的比例显示图像

我使用引导和特定css将图像定义为：响应和旋转，基于纵横比

垂直旋转图像时，图像不会“包含”在其div容器中，并显示在菜单上

我希望保持相同的图像行为，即保持它的响应性和在容器中，而不管它是基于纵横比旋转的

下面是相关的示例代码（我没有添加完整的菜单），我还有一个正在运行的示例

@介质（最大纵横比：1/1）{
propor先生{
变换：旋转（90度）；
}
}
切换导航

123

需要为纵横比设计设置余量上限：

@media (max-aspect-ratio: 1/1)
.propor {
    transform: rotate(90deg);
    margin-top: 55px;/*Newly added*/
}

---

需要为纵横比设计设置余量上限：

@media (max-aspect-ratio: 1/1)
.propor {
    transform: rotate(90deg);
    margin-top: 55px;/*Newly added*/
}

---

诀窍是围绕左下角旋转图像。这会将图像降低100%的高度；然后，它会根据你需要的影响来翻译它

.propor {
    -webkit-transform: translateY(-100%) rotate(90deg); /* Safari */
    -moz-transform: translateY(-100%) rotate(90deg); /* Firefox 3.6 Firefox 4 */
    /*-moz-transform-origin: right top; */
    -ms-transform: translateY(-100%) rotate(90deg); /* IE9 */
    -o-transform: translateY(-100%) rotate(90deg); /* Opera */
    transform: translateY(-100%) rotate(90deg); /* W3C */  
    -webkit-transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    transform-origin: left bottom;
}

---

诀窍是围绕左下角旋转图像。这会将图像降低100%的高度；然后，它会根据你需要的影响来翻译它

.propor {
    -webkit-transform: translateY(-100%) rotate(90deg); /* Safari */
    -moz-transform: translateY(-100%) rotate(90deg); /* Firefox 3.6 Firefox 4 */
    /*-moz-transform-origin: right top; */
    -ms-transform: translateY(-100%) rotate(90deg); /* IE9 */
    -o-transform: translateY(-100%) rotate(90deg); /* Opera */
    transform: translateY(-100%) rotate(90deg); /* W3C */  
    -webkit-transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    transform-origin: left bottom;
}

---

尽管图像是垂直倾斜的，但img responsive类将应用于图像，就好像它是水平放置的一样。因此，即使在垂直旋转时应用边距，结果也不会很整洁/完美

---

我建议你保留一张单独的（肖像）图像（不要将这张图像的纵横比转换为1:1）。。。这样，img responsive类的行为可以预测，并且您可以一直得到您想要的。

尽管图像是垂直倾斜的，但img responsive类将应用于图像，就像它是水平放置的一样。因此，即使在垂直旋转时应用边距，结果也不会很整洁/完美

---

我建议你保留一张单独的（肖像）图像（不要将这张图像的纵横比转换为1:1）。。。这样，img responsive类的行为可以预测，您可以一直得到您想要的。

下面的CSS将旋转图像，并在响应的同时将其保持在容器中

将图像宽度除以图像高度，以获得此转换正常工作所需的纵横比。 600/350=171.42

@media (max-aspect-ratio: 1/1) {
  .propor {
    transform: rotate(90deg) translate3d(0,-171.42%,0) scale(1.7142);
    transform-origin: top left;
  }
}

---

下面的CSS将旋转图像并将其保持在容器内，同时响应

将图像宽度除以图像高度，以获得此转换正常工作所需的纵横比。 600/350=171.42

@media (max-aspect-ratio: 1/1) {
  .propor {
    transform: rotate(90deg) translate3d(0,-171.42%,0) scale(1.7142);
    transform-origin: top left;
  }
}

---

---

谢谢作品为什么是55px？似乎有点武断。。。是否有一个更通用的参数要添加？实际上，您需要根据预定义的值（55、57或59px）将页眉高度添加到页边顶部，或者是否可以动态地告诉css它是什么？是的，可以动态地告诉css它是什么，但是您需要javascript或jquery，现在您可以设置页边顶部：70px；谢谢作品为什么是55px？似乎有点武断。。。是否有一个更通用的参数要添加？实际上，您需要根据预定义的值（55、57或59px）将页眉高度添加到页边顶部，或者是否可以动态地告诉css它是什么？是的，可以动态地告诉css它是什么，但是您需要javascript或jquery，现在您可以设置页边顶部：70px；谢谢，但我希望它以alsoThanks为中心，但我希望它以alsoThat为中心这是一个问题，因为图像会随着视图的变化而变化，我不想将我的图像库翻倍…这就是引导的方式。。。最好让它做它擅长的事情。添加任意边距（例如通过jQuery）将需要大量的处理工作，结果永远不会完美或整洁。。。如果你想要像素级的可靠性，你必须将你的图像翻倍，如果你的业务需求允许的话，你必须裁剪它们…这是一个问题，因为图像会随着视图的变化而变化，我不想将我的图像库翻倍…这就是引导的方式。。。最好让它做它擅长的事情。添加任意边距（例如通过jQuery）将需要大量的处理工作，结果永远不会完美或整洁。。。如果你想要像素级的可靠性，你必须将你的图像翻倍，或者在你的业务需求允许的情况下进行裁剪……听起来很有趣，就像我需要的一样。我来查一查！如果我的图像以1.5到1.8的比例更改为另一个，我需要如何更新代码？如果图像大小更改，则将图像宽度除以图像高度以获得纵横比。具有600x330像素图像的示例。600/330 = 1.818. 将此比率插入

刻度（1.818）

，然后将逗号向后移动两个空格，并将数字作为负百分比插入

translate3d（0，-181.8%，0）

谢谢，我会尝试！听起来很有趣，就像我需要的一样。我来查一查！如果我的图像以1.5到1.8的比例更改为另一个，我需要如何更新代码？如果图像大小更改，则将图像宽度除以图像高度以获得纵横比。具有600x330像素图像的示例。600/330 = 1.818. 将此比率插入

刻度（1.818）

，然后将逗号向后移动两个空格，并将数字作为负百分比插入

translate3d（0，-181.8%，0）

谢谢，我会尝试！