How to show middle of image in div using css?


Tags: html,css,html5,css3,position

Problem :

How to show middle of image in div using css ?

https://jsfiddle.net/yn7hubkd/

CSS:

.out{
    width: 500px;
    height: 500px;
    overflow: hidden;
}

HTML:

<div class="out">
  <img src="https://redditupvoted.files.wordpress.com/2016/03/waffles-cat.jpg">
</div>

I get this output: http://i.imgur.com/gYzP1xo.png

But I want to get it like this (centered in x-direction, black square is image and red square is div class out): http://i.imgur.com/9QGVYtN.png

The output result is: http://i.imgur.com/EqzM7QO.png



Solution :

This behaviour can simply be achieved by using the image as background. Just set background-size: cover; and background-position: center; to fill the container with the image and position it in the center:

.out {
  width: 500px;
  height: 500px;
  overflow: hidden;
  background-image: url(https://redditupvoted.files.wordpress.com/2016/03/waffles-cat.jpg);
  background-size: cover;
  background-position: center;
}
<div class="out"></div>

In case that you are forced to use the <img /> tag, simply add a negative left margin of 50%:

.out {
  width: 500px;
  height: 500px;
  overflow: hidden;
}
.out img {
  margin-left: -50%;
}
<div class="out">
  <img src="https://redditupvoted.files.wordpress.com/2016/03/waffles-cat.jpg">
</div>


    CSS Howto..

    How to reference css in actionlink?

    How to change a form's CSS class without affecting FormController.$pristine?

    How to set same height each list items?

    How to use CSS to square the corner on a submit button

    How to make a frame around CSS component from a picture source

    How can I hide a div when content is not displayed

    How to check “IF any one or all buttons are clicked” in jquery

    How to solve divs overlapping issue and maintain css fluid layout?

    How can I vertically align two floated divs?

    How to hide a div based on its class

    How to style a button's font in CSS?

    How to get these divs side-by-side while still keeping position:relative and not using float?

    How to bring all elements down with a header slide up/down?

    How to make top and bottom of div triangle with CSS?

    How can we prevent that when I resize my window, my images move using HTML-CSS?

    CSS: How to prevent contents of scrollable div from appearing behind a fixed div

    Bootstrap: How to make repeated divs go around a fixed div

    Inline blocks somehow don't get displayed in a straight line [duplicate]

    how to stop jquery change css of all the divs onhover of a single div

    How to overlap auto-scaling images with an auto-scaling background

    How can I create CSS styles dynamically?

    How do I center two divs within a larger div?

    how to place the images exactly in menu position

    How to restore CSS style to its super class

    How to refer to third level lists in css?

    HTML5/CSS3 how to expand an anchor element to fit full size of it's li parent

    How to re-size an image inserted via tag?

    How do I align these links inside inline-blocks to the top?

    How to remove spacing between the top of a border and a div [closed]

    How to equally align two vertical columns created using a loop, an array, and appending childs in JavaScript (or CSS)?