Images change size when zoom in/out

HTML & CSS
1

Hi All,

I’m very new on HTML & CSS. This is a site developed by my friend who is unable to solve the issues now. There are 2 issue which are linked to each other.

When we zoom In/Out the logo image changes its size completely, and if we change to mobile view the logo is stretched.

Can anyone help me its kind of urgent issue.

The Website URL is: www.ippbx.com

2

To make an image maintain its aspect ratio the height should be set to auto.
But you have a strange width setting too, 200%, there are few instances when you should want an element to be more than 100%.

<aside class="off-topic">Your Banner1.jpg image is a bit on the large side, it could do with optimising to speed up load times.</aside>

4 Likes
3

Hi Sam,

I appreciate your response but my real concern is logo image.

4

As Sam has said, your width: 200% on the logo image makes no sense.

EDIT: The error console shows 4 or 5 errors which MAY affect how your site displays

5

Yes, something like width: 100%; height: auto would be better, then control its size via the width of its parent: .logo possibly using a width and a max-width.

6

I’m Sorry As I said I’m new on this Following is the code can you tell what should i change and try.

.logo img {
height: 100%;
width: 200%;
}

how to make it auto?

7

Something like this if you want the height maintained.

.logo {
 height: 100px;
 width: auto;
}
.logo img{
width:auto;
height:100px;
}
2 Likes
8

I made that change and now logo is big and behind the banner.

I guess I should now change the size of the image from photoshop.

Am I right?

9

No you did not add the code I gave you properly.

You did not add the second rule. You still have this in effect.

.logo img {
	height: auto;
	width: 200%;
}

It should be:

.logo img{
width:auto;
height:100px;
}

You were supposed to add all my code after any initial styles or integrate the items in the relevant place.

You could have just added it to the end of your css file. Then there was no need to adjust anything else.:slight_smile:

1 Like
10

Thank You | Thank You | Thank You

Paul and everyone for helping me.

It is working good now.

I’ll continue to take your help future as well.

2 Likes
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.