Image Stretched

User 2924428 Photo


Registered User
1,718 posts

Hey guys, i'm having a bit of a problem with my image stretching on my website, I checked all the dividers to make sure they were closed and they are, but for some reason the height / width of the actual image has been stretched beyond limits. . is there a way to fix it? It's the closed beta sign on the front page..
www.fareastexpansion.com
User 187934 Photo


Senior Advisor
20,267 posts

Look here.
.columns img {
width: 100%;
}
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2924428 Photo


Registered User
1,718 posts

I got everything completed , thank you Eric. Why is it that if the image is already 590x244 at 100% it looks like it's stretched? One would think 100% would mean that the image is 590x244, and not stretched?
User 271657 Photo


Ambassador
3,816 posts

Matt, you should decide if you want a fixed-width site or a responsive site – One or the other – then code it accordingly.
Mixing the two leads to coding confusion, like this:
Your image >>>590px × 244px (scaled to 1,017px × 244px) <<<when the image gets stretched to fill 100%.

Jo Ann's going to be after you with her frying pan if you don't get some HTML/CSS basics down soon! :lol:
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 187934 Photo


Senior Advisor
20,267 posts

UncleMap wrote:
I got everything completed , thank you Eric. Why is it that if the image is already 590x244 at 100% it looks like it's stretched? One would think 100% would mean that the image is 590x244, and not stretched?

It's filling 100% of the containing div.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2924428 Photo


Registered User
1,718 posts

@paintbrush thank you :) btw i'll run as fast as I can if she sees this !

@Eric I see.. so it doesn't have to do with the image itself but the <div> itself... hrmm interesting.. thank you Eric I learned something new today !!
User 122279 Photo


Senior Advisor
14,628 posts

Seems I'm a bit late to the party here. ;) I'm not quite sure how the image is stretched, to me on my laptop (viewport 1600px x 769px) it seems ok, if anything, it may be a wee bit stretched in the height (or squashed in the width, depending on how you look at it). The actual dimensions of the image are 590 x 244.
I haven't actually looked into this, but I noticed something in the css file:
#mainRight {
background: url() no-repeat;
width: 100%px;
right: 100px;
padding-bottom:10px;
}

I guess it's a typo, you can't have both % and px for the same thing. If you say width: 100%; what is the limit? And if it is supposed to be 100%, what are those 'right: 100px;' doing? The 'section class="columns clear"' is not defined with any properties in the css, so the limit will be that of the above quoted mainRight. If you don't want your image to stretch the full width, you ought to create a div around it with a width in % of the full width and margin auto, and let the image fill that div 100%.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2924428 Photo


Registered User
1,718 posts

Hmm good job Inger, I didn't notice that at all.. i'll wipe that line of coding out and start using the W3C Validator as well.. I have been slacking on using that..
User 122279 Photo


Senior Advisor
14,628 posts

Good idea, Matt.
You should perhaps now be able to spot in the css file which code you need (= have used on the pages) and which are there just from a previous design. Then delete all the css you don't need.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2924428 Photo


Registered User
1,718 posts

@Inger got it! I will remove any coding that doesn't belong on the page. My question to you guys is, should I start going to school for basic html / css or move to css3 ?

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.