Is there a way to show a specific part of the image when on mobile?

Question

I have an image on my website that I'm making but when I am on the website on mobile the image is zoomed in on a bad part of the image rather than the focal point of it. I want to figure out a way in CSS that when shrinking the webpage down to a mobile size it zooms in on the center of the image rather than the bottom left so that I don't have to use a separate image for mobile. Thank You.

Answer 1

Do some research into media queries they could help.

Answer 2

Adapted from https://stackoverflow.com/a/19744413/3807365

.frame {
  width: 128px;
  height: 128px;
  overflow: hidden;
  position: relative;
}

.frame img {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
}


/* for demo: */

.big-frame {
  position: relative;
  width: 256px;
  height: 256px;
  display: flex;
}

.big-frame>img {
  position: absolute;
  opacity: 0.25;
}

.frame {
  left: 64px;
  top: 64px;
}

<div class="big-frame">
  <img src="https://picsum.photos/id/211/256">

  <div class="frame">
    <img src="https://picsum.photos/id/211/256">
  </div>

</div>

Answer 3

You can use Media Queries to write CSS for specific resolutions and screen orientations. Hope this helps! Example:

// Mobile resolution
.img {
  width: 500px;
  height: 300px;
  object-fit: cover;
}

// Larger screens
@media (min-width: 992px) {
    .img {
      width: 100%;
      height: 300px;
    }
}