代码之家 › 专栏 › 技术社区 › Guy Louzon

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

responsive-design image twitter-bootstrap css html

Guy Louzon · 技术社区 · 7 年前

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

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

4 回复 | 直到 7 年前

larsmagnus 7 年前

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

Vikas Jadhav 7 年前

需要为纵横比设计设置边距顶部:

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

Noel Kriegler 7 年前

技巧是围绕左下角旋转图像。这会将图像的高度降低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;
}

Akber Iqbal 7 年前

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

我建议您保留一个单独的(肖像)图像(不要在纵横比1:1上转换此图像)。这样,img响应类就可以按预期的方式工作,并且一直得到您想要的东西。