Making responsive website but image coming out too small?

Question

I'm fairly new to coding and need help.

I'm creating a responsive site and I am stuck with the header image. On desktop, it looks fine. When I go to mobile, I like the size of it but the image breaks out of the container and shows a horizontal scroll bar. I tried (overflow-x: hidden;) which did the job of hiding the scrollbar but it ended up messing up the image in mobile view.

I then gave the image container a width of 100% and it fits perfectly onto the screen with no horizontal bar, but the image is way too small.

I was wondering how I can get the image to stay the same but fit into the container?

I attached an image to further explain what I'm talking about. Thanks!

You need to set *overflow-x: hidden;* somewhere, but without your code it's impossible to tell you where. — Gerard, Oct 31 '18 at 08:11

score 1 · Answer 1 · answered Oct 31 '18 at 13:21

1

You can use srcset html code. It is pretty simple.

<img srcset="image.jpg 320w, image.jpg 480w, image.jpg 800w"
 sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
 src="image.jpg" alt="Image">

answered Oct 31 '18 at 13:21

Arshad Arsal

64
7

Please explain the role of `src`, `srcset` and `sizes` (or give links to docs) so the question author can better understand why your answer is helpful – Dimitri De Franciscis Oct 31 '18 at 13:35

score 0 · Answer 2 · answered Oct 31 '18 at 08:19

0

if you are using background image then use these css rules to keep consistent for all images

div {
    overflow-x: hidden;
}

div.img {
    background-position: center; // or give top center based on your need
}

answered Oct 31 '18 at 08:19

Nattamai Jawaharlal Manikandan

226
1
8

score 0 · Answer 3 · answered Oct 31 '18 at 08:45

I think left: -50% may help center the image:

/* the div outside */
.mobile {
  border: 1px solid black;
  width: 500px; /*size of the mobile screen*/
  height:1500px;
  overflow-x: hidden;
}
/* bottle img */
.bottle{
  left: -50%;
  max-height: 100%;
  overflow: hidden;
  position: relative;
  background-position: center;
}

effect in my test:

And the source for more reference: Center a large image of unknown size inside a smaller div with overflow hidden

Making responsive website but image coming out too small?

3 Answers3