CODEWITHSUNDEEP
htmlcsstwitter-bootstrapimageresponsive-design
Guy Louzon
Guy Louzon

Reputation: 1203

an image that breaks through its div container, over the menu

I am trying to generate a page that displays an image based on the screen's proportions

I am using bootstrap, and specific css to define the images as: responsive and rotating, based on the aspect ratio

When the image is rotated vertically, its not "being contained" in its div container, and is displayed over the menu

I would like to keep the same image behavior, that is to keep it responsive and in the container, regardless of the fact that it is rotating based on the aspect ratio

Below is the relevant sample code (I didn't bother adding the full menu), I also have a running JSFiddle example

<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>

Upvotes: 0

Views: 70

Answers (4)

larsmagnus
larsmagnus

Reputation: 509

The CSS below will rotate the image and keep it within the container whilst being responsive.

Divide the image width on the image height to get the aspect ratio needed for this transformation to work correctly. 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;
  }
}

Upvotes: 1

Akber Iqbal
Akber Iqbal

Reputation: 15031

Although the image is tipped vertically, the img-responsive class is being applied to it as if it was horizontally placed. So even if you apply margins upon being rotated vertically, the result wouldn't be neat/perfect.

May i suggest that you keep a separate (Portrait) image (and not transform this one on the aspect ratio 1:1)... that way the img-responsive class can behave predictably and you get what you wanted all along.

Upvotes: 0

Noel Kriegler
Noel Kriegler

Reputation: 529

The trick is to rotate the image around the left bottom corner. This sets the image down by 100% of the height; it then translates it for your required affect.

.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;
}

Upvotes: 1

Vikas Jadhav
Vikas Jadhav

Reputation: 4692

Need to set margin-top for aspect ratio design:

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

Upvotes: 1

Related Questions