CODEWITHSUNDEEP
htmlcssmobileresponsivedesktop
gofish1234
gofish1234

Reputation: 89

Making responsive website but image coming out too small?

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!

enter image description here

Upvotes: 0

Views: 816

Answers (3)

Arshad Arsal
Arshad Arsal

Reputation: 64

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">

Upvotes: 1

Sophie cai
Sophie cai

Reputation: 309

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: enter image description here

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

Upvotes: 0

Nattamai Jawaharlal Manikandan
Nattamai Jawaharlal Manikandan

Reputation: 226

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
}

Upvotes: 0

Related Questions