I found some code for a need I have. It shows an image and the image adjust as the browser is adjusted (aspect ratio is not kept and I don’t want it kept so there’s no height:auto needed.) I took the float out but then the image lost a border. Why is the float needed? On thebox sizing, is it really needed just to put a border around the image?
Possibly, but without knowing exactly what your need is, it is very difficult to advise.
I want it to show an image and the image adjusts as the browser is adjusted
(aspect ratio is not kept and I don’t want it kept so there’s no
height:auto needed.) When the browser is narrowed the image is narrowed. When the browser is made tall, the image is made tall.But scroll bars never show because the image does not become larger than the browser.
Simply adding max-width: 100% to an image will make it squash as its container narrows.
Unless there is a more specific behaviour you need…
2 Likes
The margin left of 10px will mean that the element is always too big for its container once the max-width comes into play and will give a horizontal scollbar at all times.
.rite {
border:1px solid red;
margin:0 0 10px 10px;
background:#fff;
padding:10px;
max-width:100%;
max-height:92vh;
}
Remove the margin-left from the image and apply to a parent container if needed.
3 Likes
Does anyone else not think the max-width is superfluous as used? If the element is block level it will always stretch to the width of the container unless otherwise specified ( and really there is no default behavior that creates >100% width) but setting max-width + margin could make the element overflow its container ( as Paul already pointed out). leaving out width altogether will eliminate the necessity for box-sizing.
hope that helps
No, the max-width is needed because when the window is smaller than the image’s intrinsic size then the max-width kicks in. The image remains its normal size on large screens but when the viewport is smaller than the image the image will get smaller. Without max-width it will stay at its original size.
2 Likes
ah , yes I see now.( I was looking only at the CSS and assumed .rite was a container element)
(Sorry about the image of my sample code. Not sure how it occxured, 'pasted the code between 2 sets of ``` … It was caused by a copy/ and paste from lotus wordpro, gmail does it too.)
I was trying to remove the url from the HTML and put it in the CSS. It validates but still doesn’t work at all, just to display an image. I can’t understand why. .
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>C</title>
<style type="text/css" media="screen">
.xa{background-image:url(https://support.kickofflabs.com/wp-content/uploads/2016/06/800x600.png)}
</style>
</head>
<body>
<div class="xa"></div>
</body></html>
The div has no content, so will have no height and occupy no space to display a background in.
To give it some height without any content and be responsive, add padding (top or bottom) in %.
You could use a fixed height, but that won’t keep aspect, though I’m unsure exactly what you want. You may need other properties like background-size.
1 Like
I see. That works but it creates, in this case, unnecessary work. I’ll stay with the image tag in the html. Thanks Sam.
FTFY
I can’t get the max-height:92vh to work. This does what I want it to do for wdth - the image to hold to the right side of the browser without exceeding the right side of the browser. I was trying to do the same for the bottom (minus 8%).but when the browser is wide the bottom of the image exceeds the bottom of the browser, I was hoping max-height:92vh (apparently named for the mighty Van Halen) would fix it.
!DOCTYPE HTML>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style type="text/css" media="screen">
html, body {
margin:0;
padding:0
}
.rite{
background:linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, 0)),url(http://wfiles.brothersoft.com/b/bugatti-veyron-16-4-grand-sport-vitesse_196257-800x600.jpg) no-repeat;
background-size:100% auto;
width:100%;
padding-top:100%;
max-width:100%;
max-height:92vh
}
</style>
<title>btest</title>
</head>
<body>
<div class="rite"></div>
</body></html>
It might be splitting hairs, and maybe semantics is over-rated.
But my take on deciding whether to have an image as an <img> or a CSS background is not based on display properties but whether it is part of the page content or pure decoration.
2 Likes
I’m still unsure of your desired result, so here is another blind guess.
PS: I edited your above code so the css properties are on separate lines, it’s so much easier to read.
1 Like
Mit, When would an image be content and not decoration? When the subject is the image and the image is not entirely meant for aesthetics?
Sam, that works perfectly and is so simple.it makes me want to understand; what is it (css code) that makes an image exceed the browser. I’m starting to wonder if “100%” has two meaning in css. What are the types of CSS code that keep an image tied to the browser edge/line/border and what are the types of CSS code that have no regard for the browser’s edge (=, >, < the browser’s edge). Is it background-size refers to holding an image to the browser edge and all other properties have no regard for the browser edge?
Thanks so much!
.fill {
min-height: 92vh; /* this makes the div at least 92% of the Viewport Height */
background-image: url(http://lorempixel.com/800/600/abstract); /* image URL */
background-size: 100% 100%; /* Makes the background fill the height and width of the containing div */
}
The div being a block element, will fill the width by default (width: auto).
width: auto is not the same as width: 100% because the addition of margins and padding will make the total more than 100%. But that’s when box-sizing can become useful.
When it conveys information about the subject of an article. It could be an illustration, diagram or photograph relating to the subject.
Not just there to look pretty.
2 Likes
I believe this is what the OP is asking for per his code in post #14 (he did indicate max-height and no-repeat).
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>btest</title>
<!--
https://www.sitepoint.com/community/t/is-this-just-a-bad-example-of-box-sizing-and-float-right/239846/14
Chris77
-->
<style type="text/css" media="screen">
html, body {
box-sizing:border-box;
padding:0;
margin:0;
}
*,*::before,*::after {
box-sizing:inherit;
}
.rite {
background:linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, 0)),url(https://support.kickofflabs.com/wp-content/uploads/2016/06/800x600.png) no-repeat;
background-size:cover;
background-position:50% 50%;
height:75vw;
max-height:92vh;
border:2px dashed magenta; /* TEMPORARY Border for TESTING. TO BE DELETED. */
}
</style>
</head>
<body>
<div class="rite"></div>
</body>
</html>
Of course, I could be wrong.
Test by changing the width AND height of the browser window separately and observing the results.
Nope, I am wrong. I missed the part about the image not keeping its aspect ratio and that the max-height should have been min-height. Makes a difference.
1 Like
I mostly answered that in my previous answer
No, the max-width is needed because when the window is smaller than the image’s intrinsic size then the max-width kicks in. The image remains its normal size on large screens but when the viewport is smaller than the image the image will get smaller. Without max-width it will stay at its original size.
An image won’t resize unless you either set its width to 100% (and height to auto to maintain aspect ratio) or if you want the image at its intrinsic size on larger screens but shrink with browser window then use max-width:100% instead of width. width:100% will stretch the image to 100% of its container.
In your original example you also added a margin-left and it was the margin left that was also triggering a scrollbar because 100% + margin-left is bigger than the viewport.
Notwithstanding the above the demos by Ron and Sam show you how you should be tackling this anyway:)
1 Like