Resize image To cover both width and or height and center it

Question

Say i've image 400x200 pixels. I want it to zoomin to fit any div until there is no space vertically or horizontally. So in programming i'd say it like this..

if (imgHeight < divHeight || imgWidth < divWidth) {
zoomIt until true and center it vertically and horizontally.

So for example take 400 width image and 100 height. Now i want this image to increase in height until its height is also 200. but since it gotta keep ratios. Its width is going to be 800. And now it needs to center horizontally. since div is just showing 0 - 400 and rest 400 are hidden. Need to show 200 to 600..

The question linked as duplicate doesn't solve it only css way.

possible duplicate of [How do you stretch an image to fill a
while keeping the image's aspect-ratio?](http://stackoverflow.com/questions/1891857/how-do-you-stretch-an-image-to-fill-a-div-while-keeping-the-images-aspect-rat) — Paul Sasik, Mar 27 '15 at 03:40
Scroll down and take a look at Prouda's CSS-only solution. That should probably be the accepted answer at this point: http://stackoverflow.com/a/9388218/47550 And by the way, it's duplicate questions that are the reason to close a post, not duplicate answers. — Paul Sasik, Mar 27 '15 at 05:01
@MuhammadUmer plz mark correct answer I think my solution is fit with your problem — Alupotha, Mar 29 '15 at 04:11
@Alupotha what you did isn't what i wanted... This is what i wanted: http://jsfiddle.net/yhuL4ucy/ — Muhammad Umer, Mar 29 '15 at 15:40
possible duplicate of [Centering a background image, using CSS](http://stackoverflow.com/questions/2643305/centering-a-background-image-using-css) — Alupotha, Mar 29 '15 at 21:54

score 1 · Answer 1 · answered Mar 27 '15 at 04:37

Here is a pure CSS solution, where the trick is in the margin:auto and display:block applied to the img. see snippet below:

.wrap {
  border: 1px solid red; /* demo purposes */
  padding: 10px; /* demo purposes */
  box-sizing: border-box; /* demo purposes */
  height: 70%; /* whatever you like */
  width:70%; /* whatever you like */
  margin: auto;

}

img {
  display: block; /*fix img gap */
  margin:auto;
  max-height: 100%;
  max-width: 100%
  width:auto;
  height:auto;
}

<h1>HORIZONTAL</h1>
<div class="wrap">
  <img src="http://placehold.it/400x200" />
</div>
<hr/>
<h1>VERTICAL</h1>
<div class="wrap">
  <img src="http://placehold.it/200x400" />
</div>

in this example img isn't fitting the wrap but wrap is adjusting based on img — Muhammad Umer, Mar 28 '15 at 15:28

Muhammad Umer · Accepted Answer · 2015-03-29T15:41:20.673

0

After some research i think this works best:

Jsfiddle: http://jsfiddle.net/yhuL4ucy/

background-image: url('..');
background-position: center center;
background-size: cover;

edited Mar 29 '15 at 15:41

answered Mar 27 '15 at 17:35

Muhammad Umer

17,263
19
97
168

In your question you ask how to fit IMG and not how to fit background-image..very different things OP. Therefore I would advise you to be more specific in your future questions.. And take a look to your 2 answers here. At least mine does what you've asked – dippas Mar 28 '15 at 10:57
i never implied it has to be img tag – Muhammad Umer Mar 28 '15 at 15:26

Resize image To cover both width and or height and center it

2 Answers2