Crop Image to Center on Screen Resize with CSS

How to automatically crop and center an image

One solution is to use a background image centered within an element sized to the cropped dimensions.

Basic example

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
}

<div class="center-cropped" 
     style="background-image: url('https://via.placeholder.com/200');">
</div>

CSS Display an Image Resized and Cropped

You could use a combination of both methods eg.

    .crop {        width: 200px;        height: 150px;        overflow: hidden;    }
    .crop img {        width: 400px;        height: 300px;        margin: -75px 0 0 -100px;    }

    <div class="crop">        <img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">    </div>

Crop Image To Center on Screen Resize with CSS

I would take a look at background-size and then just center it vertically and horizontally.

http://css-tricks.com/perfect-full-page-background-image/

How to crop an image and keep it's center when resizing the window

Flexbox can do that.

In this case, I've allowed overflow and made the image slightly transparent so you can see the behaviour of the image.

.image-container {  height: 460px;  //overflow: hidden;  display: flex;  width: 60vw;  margin: 1em auto;  border: 1px solid red;  justify-content: center;}
.banner-image {  opacity: .5}

<div class="image-container">  <img src="http://www.fillmurray.com/620/460" class="banner-image" alt="Banner image"></div>

HTML/CSS Cropping Image from left AND right when screen becomes too small

UPDATE:

If anybody has the same Problem i had... here´s my solution.
I used background pictures. So i was able to use

@media

for different screen sizes (i just used the same picture with different sizes) and

background-position:center;

so the image gets cropped from the left and right side.
Thanks again for all your help!

Image crop from both sides and stay center

We can achieve this with background-image property.

http://codepen.io/asim-coder/pen/YywaeB

HTML:

<footer class="site-footer">
</footer>

CSS:

.site-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  overflow: hidden;
  background-image: url(http://lorempixel.com/500/60);
  height: 60px;
  background-size: cover;
  background-position: center center;
}

How to center and crop an image to always appear in square shape with CSS?

jsFiddle Demo

div {
    width: 250px;
    height: 250px;
    overflow: hidden;
    margin: 10px;
    position: relative;
}
img {
    position: absolute;
    left: -1000%;
    right: -1000%;
    top: -1000%;
    bottom: -1000%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}

<div>
    <img src="https://i.postimg.cc/TwFrQXrP/plus-2.jpg" />
</div>