zoom a banner in CSS

Question

I would like to zoom my banner but I want to keep the image quality, do you think that it's possible?

The person must take more space... Here is an example....

.mybanner{
  height: 500px;
  width: 100%;
  position: absolute;
  
}

    
<img class="mybanner" src="https://zupimages.net/up/19/13/60rt.jpg" alt="banner">

Despite what movies may show, zooming into an image does **not** allow you to retain the same level of quality. If you enlarge an image it **will** pixelate. — Obsidian Age, Mar 27 '19 at 22:35
Possible duplicate of [Scale image to fit a bounding box](https://stackoverflow.com/questions/9994493/scale-image-to-fit-a-bounding-box) — Sean, Mar 27 '19 at 22:40
You're zooming in on a raster image. How are you expecting there to not be a loss of quality? — jhpratt, Mar 27 '19 at 22:46

score 1 · Accepted Answer · answered Mar 27 '19 at 23:03

If the goal is to maintain the pixel quality, then the comment on the question is correct.

I have a feeling you are really looking to maintain the aspect ratio of the image as it currently looks a bit squished. What is happening in this case is that you have given the img element fixed height and width that do not match the image's natural aspect ratio and it ends up squishing the content to make it fit the dimensions you are asking for.

Here I changed the width to auto, allowing the browser to calculate that value according to the image's natural ratio.

.mybanner{
  height: 500px;
  width: auto;
  position: absolute;
  
}

<img class="mybanner" src="https://zupimages.net/up/19/13/60rt.jpg" alt="banner">

If you actually want to "zoom" the image, maybe using the image as a background-image of a <div> is better, where you can control the exact dimensions of the div and the image separately:

.mybanner{
  height: 500px;
  width: 100%;
  position: absolute;
  background-image: url('https://zupimages.net/up/19/13/60rt.jpg');
  background-repeat: no-repeat;
  background-size: 300% auto;
  background-position: center center;
}

<div class="mybanner" role="img"></div>

zoom a banner in CSS

1 Answers1