时间戳

首页 > 解决方案 > 在菜单上突破其 div 容器的图像

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

问题描述

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

我正在使用引导程序和特定的 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>

标签： htmlcsstwitter-bootstrapimageresponsive-design

解决方案

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

推荐阅读