How do stop an image from bleeding/overflowing past the page?-CodePudding

In the page below, we want the banner image to stay locked to the left side, while getting cropped at the page edge on the right. We don't want it causing a horizontal scroll bar to be created, and we don't want it to be stretched or contracted as the frame changes dimensions.

Example here: https://altica.ca/test/

Can anyone see how this is possible? I know I'm a noob and the CSS is likely a disaster.

I've tried to adapt the CSS with a ; overflow:"hidden" parameter but it didn't affect anything. I suspect that there's a fundamental problem with the page not having a overall container defined.

CodePudding user response：

If both width and height cant be applied, i would set display:flex and justify-content:center on the parent element. That will keep the image as is it but will center it horizontaly. If you want it to move to the side, just change the justify-content to either flex-start/flex-end, or simply left/right.

That will leave us with the following

HTML

<section >
   <img src="banner.png" height="70px">
</section>

CSS

.mt-3 img {
   max-width: 1790px /*width of the image*/
   width: 100%; /*keeps it on the left as you want*/ 
   object-fit: cover; /*when page width is less than 1790px, the image gets zoomed to the center while keeping its height and being un-distorted*/
}

CodePudding user response：

Since you are using Bootstrap, you might as well use their built-in class for responsiveness. Simply add to the img tag. Like:

<img  src="....">

However, since responsiveness keeps the aspect ratio, your image will shrink in height as the window gets smaller. To prevent that, add back the img height attribute you had before. Like:

<img  src="https://altica.ca/test/headstrip.png" style="min-height: 70px" height="70px">

This, however, will distort your image as the window gets smaller. To prevent that, you can then add the following attribute to a CSS class and then add that class to your img:

object-fit: cover;

So, Your CSS will all look like this:

.my-img {
  min-height: 70px;
  height: 70px;
  object-fit: cover;
}

and your image:

<img  src="https://altica.ca/test/headstrip.png">

See demo below:

.my-img {
  min-height: 70px;
  height: 70px;
  object-fit: cover;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;700&display=swap&ext=.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- first section start -->
<section >
  <img  src="https://altica.ca/test/headstrip.png">
</section>
<!-- first section end -->