image "difficulty" - mobile freindly - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

image "difficulty" - mobile freindly

prevent images from wrapping

Jonesy

6:03 pm on Sep 11, 2015 (gmt 0)

10+ Year Member

Top Contributors Of The Month

I wish to place 3 images horizontally and force resizing, NOT wrapping
as the viewport (window) is shrunk. Test example:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Demo Program</title>
<meta name=viewport content="width=device-width, initial-scale=1">

<style type="text/css">
img {
 max-width: 100%;
}
</style>

</head>
<body style="margin-left: 10px; max-width: 880px;">

<div style="width: 95%; min-width: 200px; text-align: center;">
<img style="margin-right: 2%;" src="http://example.com/clipart-pics/phone-clip-art-7.gif">
 <a href="its_a_404.html" target="_blank">
 <img src="http://example.com/clipart-pics/phone-clip-art-7.gif" border="0" hspace="4">
 </a>
<img style="margin-left: 2%;" src="http://example.com/clipart-pics/phone-clip-art-7.gif">
</div>

</body></html>

In the code above (which is Work Place Safe) I wish the 3 images to resize - side-by-side - as
the viewport shrinks. Instead, it wraps (ultimately) all three images and then it resizes
the three images.

I've tried using display inline , block , inline-block with no effect.
I feel I am floundering around where I have insufficient experience.
Thanks for any pointers!
Jonesy

[edited by: not2easy at 6:25 pm (utc) on Sep 11, 2015]
[edit reason] replaced domain with example per charter/TOS [/edit]

Paul Bedford

7:12 pm on Sep 11, 2015 (gmt 0)

10+ Year Member

Add a class to the images and then set a width for that class.

.header-image {
height:auto;
width:30%;
}

Play with the width and padding until it looks right.

not2easy

7:57 pm on Sep 11, 2015 (gmt 0)

WebmasterWorld Administrator

10+ Year Member

Top Contributors Of The Month

What Paul Bedford suggests is the easiest way to handle this, IMO and for conformance for Mobile devices, you shouldn't rely on "hspace" in html5, but add padding or margins in the .header-image settings. Though "hspace" still works in most modern desktop browsers, it is deprecated in html5 and may not function on all mobile browsers.

The img styling should be set at:
img {
width: 100%;
border: none;
height: auto;
}

A few other improvements:
The images should have an alt tag and closing /
the border="0" should be removed from the <img element (why I added it to the img css, but it could just as well be added to the .header-image class styling)

lucy24

9:01 pm on Sep 11, 2015 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

img {
max-width: 100%;
}

But based on your prose, that's not actually what you want, is it? You're not setting a max-width on each individual image; you're setting a max-width on the div that contains the images. In fact you've already done so, with that inline CSS.

Seems like what you're missing is something like

div.imgholder {white-space: nowrap; max-width: 95%;}

where "white-space" doesn't actually mean white space, it means "anything that would ordinarily be allowed to break", such as a dash or hyphen ... or transition from one image to the next, even if there's no space or line break.

Jonesy

9:26 pm on Sep 11, 2015 (gmt 0)

10+ Year Member

Top Contributors Of The Month

@lucy24: You are correct in your update. See below:
@not2easy: I left out the alt tags to reduce noise in my example.
You are correct re the hspace. An artifact of hacking some old,
existing test scripts. And I moved border 0 to the css. See below:
Thank you Paul, for the css incantation,
and not2easy and lucy24 for your input, too.

Here's what I have working in my example:

img { 
max-width: 100%; 
border: 0; 
height: auto; 
width: 30%;
}

... and it works like I want.
Now to futz with the "real" web page which contains two outside
images with the same widths and an inside image of a larger width.

There's some Smart People in here. :-) Thank you!
Jonesy

not2easy

10:10 pm on Sep 11, 2015 (gmt 0)

WebmasterWorld Administrator

10+ Year Member

Top Contributors Of The Month

Ideally you would use a class for the image width specific to those images or it will be applied to all images such as external images, icons, background images, third-party ads - all images. I'm glad you got it going the way you wanted.

Jonesy

1:21 am on Sep 12, 2015 (gmt 0)

10+ Year Member

Top Contributors Of The Month

Oh, ya. I did class'ify the css for those 3 images.
The final page will now squish all the way down to 320px -- if
anyone really wants to view the contents of that page on an iToy.
Thanks, Jonesy