Welcome to WebmasterWorld Guest from 54.224.91.58

Forum Moderators: not2easy

Message Too Old, No Replies

image "difficulty" - mobile freindly

prevent images from wrapping

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

Junior Member from US 

5+ Year Member

joined:Dec 23, 2008
posts:155
votes: 4


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]

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

New User from ZA 

10+ Year Member

joined:Mar 8, 2008
posts: 8
votes: 0


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.
7:57 pm on Sept 11, 2015 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:3719
votes: 205


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)
9:01 pm on Sept 11, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:14707
votes: 613


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.
9:26 pm on Sept 11, 2015 (gmt 0)

Junior Member from US 

5+ Year Member

joined:Dec 23, 2008
posts:155
votes: 4


@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
10:10 pm on Sept 11, 2015 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:3719
votes: 205


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.
1:21 am on Sept 12, 2015 (gmt 0)

Junior Member from US 

5+ Year Member

joined:Dec 23, 2008
posts:155
votes: 4


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
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members