在菜单上突破其 div 容器的图像

Question

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

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

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

我想保持相同的图像行为，即保持它响应并在容器中，不管它是基于纵横比旋转的事实

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

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel='stylesheet' href='css/vbfqy.css'>

<style>
@media (max-aspect-ratio: 1/1) {
  .propor {
    transform: rotate(90deg);
  }
}
</style>


        <nav class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
              <a class="navbar-brand" href="#" target="_blank">Brand</a>
            </div>

            <div class="collapse navbar-collapse" id="navbar-collapse-1">
              <ul class="nav navbar-nav">
                <!-- li><a href="#">Link</a></li -->
                <li class="dropdown">123</li></ul></div></nav>


<div class="container-fluid" >

    <img class="img-responsive propor" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=600%C3%97350&w=600&h=350">

</div>


  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>

Answer 1

下面的 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;
  }
}

Answer 2

宽高比设计需要设置margin-top：

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

Answer 3

诀窍是围绕左下角旋转图像。这会将图像向下设置 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;
}

Answer 4

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

我可以建议你保留一个单独的（纵向）图像（而不是在宽高比 1:1 上转换这个）......这样 img-responsive 类的行为可以预测，你得到你想要的.