Works like a charm, unfortunately all that effort was (temporarily) for naught. Of cource the space would be created on the right side of the image. But some image stretch code worked fine.
@media screen and (max-width:680px) {.fr{float:none;display:block;max-width:100%;width:100%}}
I see now the max-width in a media query is the distance from 0px starting at the left side of the browser 680 px moving toward the right side of the browser. When the browser is narrowed to 680px or narrower, then the rules in the media query (float:none;display:block;max-width:100%;width:100%) activate.
The outline everything css is really helpful. I’m really glad I asked.
You should never stretch an image without maintaining aspect ratio.
If you look at my example the image is set to a max-width of 100% but the important part is the height is set to auto. It is this auto setting of the image that will ensure the aspect ratio is always maintained in relation to the images width.
You only need the width:100% as the max-width:100% is redundant in that rule but you would have needed neither if you refer to my example as the img was already max-width:100% and thus catered for naturally.
Yes, its simply the browser width and nothing to do with anything else on the page.
Let me rewite that one sentence of mine, … the max-width in a media query is the distance from the left side of the browser (which is 0px) moving, for example, 680 px toward the right side of the browser, regarless of wither the browseer is a phone/mobile or an actual browser on a desktop/laptop) When the browser is narrowed to narrower than the max-width in the media query (or the phone/mobile width is narrower than the max-width in the media query, then the rules in the media query (float:none;etc, etc,) activate and override the CSS used when the screen is not narrower than the max-width.
In @media screen and (max-width:680px) {.fr{float:none;display:block;max-width:100%;width:100%}}
I took width:100% out and there was no stretch, then I put it back in and took max-width:100% and it did work, so I kept max-width:100% ouit. Thanks
But I didn’t see that your Float Wrap page stretched the image to fill white space left or right of the image, it shifts to fill white space on the left, only to leave white space on the right, the problem I ran into that seems to be fixed by stretching the image. But I found the height:auto code in there and tried it and it does a great job squaring stretched images, maybe too good, it kinda blasts out.
Thanks Paul !
Usually stretching an image beyond its native size is considered bad, because it may appear blurred or distorted.
The max-width: 100% stops it getting any bigger than it should be.
What I normally do when cancelling the floated images on a smaller screen is to centre the image, giving equal whitespace on either side.
I agree and is actually what I showed and suggested in my very first reply to this:) (post #17)
The OP didn’t like it
However that is the approach I always take and the one that most people follow because you don’t really want to stretch the image to the viewport width if that width is larger than the native size of the image so instead just center it. It looks much better that way anyway.
You can delay the media query in removing the float fro the image until the viewport width matches the image width but then for a short while you end up with text squashed to the side and may be only one or two words wide.
Centering is good. I just didn’t think of that idea at the time. The stretching w/o auto height gives images a big movie theatre screen look on the small screens of hand held - it’s kind of a paradox .
Anyway, the white space chase is still on - the white space is now right of the dropped down ul text. I thought of keeping the ul text at its minumum width when it drops down and I actually succeeded in doing that but I just can’t get the paragraph text below the ul to float right of the ul. It appears that if B is to the right of A then in html/css code B has to be above A; I just can’t figure out how to pull the paragraph below the UL text up to and to the right of the UL text.
<!DOCTYPE html>
<html>
<head>
<style>
.fr {
float:right;
margin:0 0 20px 10px;
}
.wrapper {
overflow:hidden
}
@media screen and (max-width:460px) {
.fr {float:none;
display:block;
width:100%;
height:auto;
margin:0 10px 10px 26px}
ul {width:112px}
p{float:right} }
* {outline:1px solid #f00}
</style>
</head>
<body>
<img class="fr" src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Martinique_Beach_%28Salines%29.jpg" width="250" height="280">
<ul>
<li>
<h1>aaa bbb ccc a c</h1>
</li>
<li>
<h1>aaa bbb ccc v</h1>
</li>
<li>
<h1>xyza bc de fghi kln</h1>
</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.</p>
</body>
</html>
You’d need to float the ul because floats must come first in the html when you want items to wrap around them.
You would then remove the float:right from your paragraph because fluid text on a widthless float will be 100% eventually and will thus never sit next to anything.
I’ll work on that. I think maybe there was no stretching on the small screen in my example now that I think about it, because to fit on a small screen images are shrunk, obviously, so even if there is stretching and w/o the auto height you told me about, it seem any image, streched ot not will have a movie theatre (characture) look .The horizontal condensing appearence is caused soley by lack of auto height. Thanks.
Ron,
Yours does seem to have the image reaching farther left. What part of your code is doing that?
I don’t see the need for setting mex image width when it’s going to be risized to different sizes by each of the different handhelds for thier different screen sizes.
Both of your chunks of code are the same except for one has
ul {
width:40%;
float:left;
ant the other has
ul {
width:40%;
float:left;
I see that you seriously increased the dimensions of the image only to be reduced by your code. Any particular reason?
Ron,
Yours does seem to have the image reaching farther left. What part of your code is doing that?
I don’t see the need for setting mex image width when it’s going to be risized to different sizes by each of the different handhelds for thier different screen sizes.
Both of your chunks of code are the same except for one has
ul {
width:40%;
float:left;
ant the other has
ul {width:112px}
p {float:right;}
I see that you seriously increased the dimensions of the image only to be reduced by your code. Any particular reason?
That is from post #68. I was concentrating on recoding the image which seemed to be the front-burner issue at that time. I was not paying much attention to the <ul> and <p> because I could not envision how they might be used on a real page so I just copied them from your example and pasted them into mine for completeness. No special thought given to them. I added a note in my next post that the paragraph should not have been floated.
That is from post #70.
In response to @PaulOB’s post #69, I realized that I must have overlooked some of your description so I brought his description to life by floating the <ul> to the left and not floating the paragraph. I arbitrarily chose {width:40%} for the <ul> in the media query because it allowed the demo paragraph to sit beside it at the smallest window width.
About the image…
(1) The dimensions shown in the HTML are the actual dimensions of the real image. width="2304" height="1728">
The size of the download (KB) does not change if you write smaller numbers in those attributes, the user will still download the full image from the server. If you want to reduce the burden of sending a large image to the user, then you must serve the user a smaller image. That’s just how it works. A disadvantage of using estimated or wishful dimensions in those attributes is that you may distort the actual aspect ratio of the image (as happened in one of your earlier examples). If you use the actual dimensions then allow the HTML and CSS to resize the image, the proportions will be retained unless coded otherwise.
(2) How should one resize an image? I put the image in a container, div.imgbox, and assign a width of 100% and height of auto to the image. I may or may not assign a width to .imgbox. If not, then the space on the page will determine the width of .imgbox and thus the image inside. If so, then my width assignment in CSS will determine the width of .imgbox and thus the image inside. The aspect ratio of the image is thereby preserved. Can it be done other ways to save a div? Sometimes, Yes, but the div.container method is foolproof and easy.
(3)
I’m not sure exactly what you mean by that statement. When the media query kicks in, the image becomes centered and the max-width of the imgbox is increased in the media query to 400px. You could increase that max-width a little more if you wish, or set it to “none” if you want the image to fit edge-to-edge snugly when the media query kicks in. I left a small amount of white space on each side of the image so you could try that very change if you are in a mood to play. There are a couple of comments in the CSS that tells what does what. It is probably best not to change this one unless you feel adventurous. max-width:320px; /* width of the image while floating */
Not sure what you mean by this as devices won’t resize the image to fit automatically unless you instruct them to do so with css, media queries and with the appropriate viewport meta tag in the page.
It’s probably been mentioned earlier in the thread but you must have the viewport meta tag in your page.
Without that tag mobile devices will ignore your media queries and assume your page is 960px wide and then just shrink the whole page to fit the device thus rendering text and images impossible to read and use in any useful way.
It certainly should help Ron as we have covered every scenario now (some points many times)
I forgot about the image in this example coming from a link and having to be downloaded, so that’s why I let the code resize the downloaded image.
I really need to write down definitions for some of these silimar terms and concepts.
If you look at all our demos you will see that in the media query for smaller screens we removed the left margin (or set it to auto for the centred version) in most of our demos to address this very point.
If you remove the left margin from the float itself (outside the media query) then the text will hug tightly to the side of the image and look awkward. You want a left margin when the image is floated but remove it in the media query when the image is no longer floated and has no text alongside.
One thing I’ve learned is to check both fr-s. I did fix that.
Your centering has become necessary. The space was chased from the left of the image to the right of the image to the right of the dropped headline text, now when the screen is too narrow the floated left hearline text stays floated left and regular text that was to the right of the headline text drops down, leaving - white space right of the dropped headline text.
I found some code to try
.center { display: table; margin: auto}
using a search on float center and there’s centering i already have for images
.cntrimg{display:block;margin-left:auto;margin-right:auto}
I’ll work on those.
