The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Header image affected by image gallery css
nootkan
post Dec 8 2021, 04:17 PM
Post #1


Member
***

Group: Members
Posts: 34
Joined: 16-July 21
Member No.: 28,016



Hi everyone, I need another set of eyes to help me figure out what is affecting my header image size. If I remove the width and height properties the image shows like it should but then doesn't pass the cls score in googles page speed test. When I add the width and height properties the image gets stretched somehow. I thought it had something to do with the image gallery css conflicting with the header img css but nothing I try seems to make a difference. If anyone can see what wrong please advise.

Thanks.

https://www.bassonhook.com/braggn/Braggn.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 8 2021, 10:24 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Do you mean the photo of Paul? Well, you've rescaled the image and changed it's aspect ratio. The image really is 200x195. You've made it 180x176. That doesn't give exactly the same aspect ratio, but it isn't off so much it should distort the image very much. It seems it's the max-width: 100% in combination with the fixed height that is the big problem.

CODE
embed, img, object, video {
    max-width: 100%;
}


If I make the browser window smaller the width of the image will shrink with the page, but the height will always be 195px.

It's almost always better to resize an image in an editor. If you must do it in HTML/CSS, use only the image width and leave height out. The browser will scale it properly and keep its native aspect ratio. Don't know if Google complains about this, but I would guess it doesn't. So if you don't want the image to be 1200 pixels wide, make the physical image the size you want it to be. In this case you'll scale it anyway, but there's no reason not to use the best possible image as a starting point. But that's just what I think.

But the main point when it comes to your problem is that if you want to keep the scalability of the img with the help of max-width, don't use a height.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
nootkan
post Dec 9 2021, 01:37 PM
Post #3


Member
***

Group: Members
Posts: 34
Joined: 16-July 21
Member No.: 28,016



Hi Pandy, thanks for your reply. that isn't the issue I was trying to resolve but thanks for pointing it out.

My issue is with the header image logo in the top left of the page. bohlogo5.png

I tried removing the
CODE
embed, img, object, video {
    max-width: 100%;
}


before I posted here for support but that didn't make any difference. Also that code was generated by Dreamweaver not me.

The image works fine on the main pages of the site that don't have the image gallery css that I got from W3Schools when I created the image gallery.

That is why I thought it may be related to the gallery css.

This post has been edited by nootkan: Dec 9 2021, 01:41 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 9 2021, 02:08 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



What browser? I don't see anything off with that image.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
nootkan
post Dec 12 2021, 04:53 PM
Post #5


Member
***

Group: Members
Posts: 34
Joined: 16-July 21
Member No.: 28,016



Hi Pandy, The original image on this page is wider than it is supposed to be compared to the index page ie: https://www.bassonhook.com.

Also if you change the screen size of the browser you'll see the difference between the two pages in size. It looks the same in all browsers I've tried.

There only seems to be a couple of pages that have this effect while the rest of the site seems to function properly so I assumed it was a css issue.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 13 2021, 01:31 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



OK, it's actually more narrow but also has less height and another aspect ratio. You've resized it again. It really is 227 x 120 , but it's resized to 212 x 90 according to my browser. It has the correct size in the HTML, so it must be somewhere in the CSS. I took a while to find. You've given it padding, in two places no less. That distorts the image
CODE


You have padding specifically for this image here.
#header img.logo {
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 20px;
}


And for all images here.
CODE
img {
    border: 0;
    padding: 5px;
}


Don't do that. You typically don't want padding on an image. For special tricks maybe, but not generally. Just remove all of it. And especially the secont rule as it will distort every image on the site. And as said earlier, if you want to resize an image with HTML/CSS, use only width, put preferably resize the physical image.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 13 2021, 02:10 AM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Actually, now I have confused myself and what I told you above is basically wrong...

I can see the padding you use distort your images because when I remove it the images are resized and look fine. But when I try to replicate that it doesn't happen. There must be something else in your CSS that together with padding causes this. But what?

Sorry I told you something that is obviously wrong. But even if the theory is wrong, removing that padding will, mysteriously, fix your problem.

What am I missing here? wacko.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
nootkan
post Dec 13 2021, 03:25 PM
Post #8


Member
***

Group: Members
Posts: 34
Joined: 16-July 21
Member No.: 28,016



Hi Pandy, I had originally removed those instances of css but it makes the image look unprofessional because it won't center when viewed at a reduced resolution on smart phones.

The exact same css set up exists for the main pages without issues which is why I wanted to see what was causing it on my braggn/braggn.html and about.html pages.

I have removed the img css and related media queries until I can find another way to achieve what I want.

Thanks for all your help and direction.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 13 2021, 04:30 PM
Post #9


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Dec 13 2021, 08:10 AM) *

I can see the padding you use distort your images because when I remove it the images are resized and look fine. But when I try to replicate that it doesn't happen. There must be something else in your CSS that together with padding causes this. But what?

"box-sizing: border-box" should change the image's box model:

CODE
img {
box-sizing: border-box;
border: solid red;
}

img.foo {
padding: 5px;
}

<img src="dog.jpg" width="100" height="50" alt="">

<img src="dog.jpg"  width="100" height="50" alt="" class="foo">

Padding adds space between the image and its virtual border (even if it has no specified border). With the default CSS box model, this padding would increase the image's total width, but "box-sizing: border-box" instead makes the image shrink to give space for the padding.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 13 2021, 04:36 PM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Dec 13 2021, 10:30 PM) *

"box-sizing: border-box" should change the image's box model:


Is that used? I didn't find that. But I just used the inspector.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 13 2021, 04:49 PM
Post #11


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(nootkan @ Dec 13 2021, 09:25 PM) *

Hi Pandy, I had originally removed those instances of css but it makes the image look unprofessional because it won't center when viewed at a reduced resolution on smart phones.

How about using margin instead of padding for the centering? Margin shouldn't affect the box model regardless of box-sizing value. Or you could remove the extra box-sizing rule below.

QUOTE
The exact same css set up exists for the main pages without issues which is why I wanted to see what was causing it on my braggn/braggn.html and about.html pages.

No, https://www.bassonhook.com/braggn/css/bassonhook.css contains both

CODE
body {
    box-sizing: border-box;
}

and

CODE
* {
    box-sizing: border-box;
}

while https://www.bassonhook.com/css/bassonhook.css only contains

CODE
body {
    box-sizing: border-box;
}

The "box-sizing" property is not inherited, so the styling on the BODY element shouldn't affect the IMG element. See also https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 13 2021, 04:52 PM
Post #12


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Dec 13 2021, 10:36 PM) *

QUOTE(Christian J @ Dec 13 2021, 10:30 PM) *

"box-sizing: border-box" should change the image's box model:


Is that used? I didn't find that. But I just used the inspector.

I found them with the Inspector's search field. cool.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
nootkan
post Dec 15 2021, 04:00 PM
Post #13


Member
***

Group: Members
Posts: 34
Joined: 16-July 21
Member No.: 28,016



QUOTE(Christian J @ Dec 13 2021, 01:49 PM) *

QUOTE(nootkan @ Dec 13 2021, 09:25 PM) *

Hi Pandy, I had originally removed those instances of css but it makes the image look unprofessional because it won't center when viewed at a reduced resolution on smart phones.

How about using margin instead of padding for the centering? Margin shouldn't affect the box model regardless of box-sizing value. Or you could remove the extra box-sizing rule below.

QUOTE
The exact same css set up exists for the main pages without issues which is why I wanted to see what was causing it on my braggn/braggn.html and about.html pages.

No, https://www.bassonhook.com/braggn/css/bassonhook.css contains both

CODE
body {
    box-sizing: border-box;
}

and

CODE
* {
    box-sizing: border-box;
}

while https://www.bassonhook.com/css/bassonhook.css only contains

CODE
body {
    box-sizing: border-box;
}

The "box-sizing" property is not inherited, so the styling on the BODY element shouldn't affect the IMG element. See also https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing


Christian, thanks for this. It turned out to be the padding for the about.html page and a combination of the border-sizing:border-box and padding for the braggn.html page. I removed the box sizing css from the body tag as it was required in the second instance for the gallery. Once I changed the padding to margin in both pages all is good again.

Much appreciated.

This thread is now resolved!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 09:35 AM