0

I want to use css to make an image keep its aspect ratio (16:9) and be responsive at the same time.

This image will always be in the center of the screen. Check the schema to help you.

I found this post and I tried Chris's solution and Isaac's solution. But I cannot bring the image to the center. I tried using Bootstrap like so.

<div class="col-md-4">.col-md-4</div>
<div class="wrapper col-md-4">
  <div class="main">
    This is your div with the specified aspect ratio.
  </div>
</div>
<div class="col-md-4">.col-md-4</div>

or

<body>
  <div class="col-md-4" id="wrap1">.col-md-4</div>        
    <div class="col-md-4" id="aspectRatio">Aspect Ratio?</div>
  <div class="col-md-4" id="wrap2">.col-md-4</div>        
</body>

but all the divs appear the one underneath the other.

Any ideas on how to bring the div in the center, by using Bootstrap or not?

Thanksenter image description here

Community
  • 1
  • 1
slevin
  • 4,166
  • 20
  • 69
  • 129

2 Answers2

1

I always put my img in a div and center the div with:

margin:0 auto;

And for responsive image define width and make the height is auto. Hope it helps.

Ryuk
  • 75
  • 7
0

This will center your element on the page.

.element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

I believe you would have to define a min-width or max-width for your image at 100% of a container that is at the aspect ratio that you want for the second part of your question. Also, if you need to dynamically set the aspect ratio there is always JS. Qjuery has functions you can use I think so that will not hard if you are already using it inside of your project.

EDIT: to center the image in your second header I would suggest having a structure such as:

-second header

---------wrap

-----------------image

have the image as 100% size of the wrap. have the wrap relative to the second header with a width and height of 100% relative to it.

I hope this helps :)

Judder
  • 1
  • 1