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 override a templates default option with javascript and css

    How to change the content of a span using css hover?

    How do I put my content in a box?

    How to make vertical lines between list items using CSS?

    How to style one react component inside another?

    Hide one div when showing another with JavaScript

    How to create a zig zag banner with css

    How to do this kind of Button in CSS?

    CSS/Menu: How to position element right below/beside elements

    How to have an unlimited amount of divs shown next to each other

    How to add a picture to the top of my webpage?

    how to align the content to center of page using css

    How to set an Ionic list item height with a background image

    Working with a css3 key frame slide effect but cant figure out how to configure correctly.. Fiddle included

    GridView Non-Visible Row Showing up in Empty Data Row

    How to remove the extra space between two span elements?

    How to prevent default Css scroll onclick and allow javascript event only?

    How to assign color obtained by CSS gradient generator

    How to access lower children using > operator?

    How can I improve this markup and CSS to keep things simple and easy to work with?

    How to prevent mouseenter event action with jQuery

    How to spin an image horizontally with CSS

    How to make text svg-animation launch when visible?

    how should i set scrollbar properties in css

    how to clip text in css like gmail does to emails subject listings

    How can I trigger jQuery fadeIn() fadeOut() from a
    element

    How to Add Class to Bootstrap Thumbnails on Slider Change

    How to start different elements on different keyframes of an animation in CSS

    How can a transformed Image transition back to it's original shape when hovered?

    Textarea doesn't show newline in IE