I have two div's:
<div class="iphonebackground">
<div class="screenbackground"></div>
</div>
.iphonebackground {
background-image:url("../img/iphone-frame.png");
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
height:576px;
}
.screenbackground {
background-image:url("../img/iphone-background.png");
background-repeat: no-repeat;
background-position: center;
background-size:100%;
height:576px;
}
The first, iphonebackground has background-image set as an image of an iPhone frame (http://chpwn.com/apps/iphone-frame.png). The second, screenbackground has background-image set as PNG image the same size which holds the image of what would be on the iPhone's screen (https://dl.dropbox.com/u/290586/iphone-bg.png).
The result of this is that the page renders something like this: http://imgur.com/yVF9gyg. As my site is based on the Twitter Bootstrap the div's resize to fit the browser window so on a smaller display it looks something like this: http://imgur.com/Q2Qy4wn.
As you can see, the height of the div is fixed at 576px. This means that in the second image there is a large blank space above and below the background-image. Is there a way to set the height of the divs so that they are as high as the size of the background-image's height, thus removing the blank space?
A background image has no effect on the size of the DIV to which it is attached. The size of that DIV will be determined by its content, or by width and height if explicitly set in your CSS.
If you have a DIV with a % width (i.e. unknown pixel width), then you cannot set the height based upon this unknown width without resorting to JavaScript, or... the new CSS calc() function, where you could specify the height as a ratio of the unknown width and let the browser work it out. See https://developer.mozilla.org/en-US/docs/Web/CSS/calc for more.
Support is getting better (78% according to caniuse.com) but you can't rely on it.
[edit] While looking for a solution myself, I found an excellent hack using padding-top, written by user Hasanavi in answer to this question [/edit]
You can try using line-height css property on your div.
line-height: normal;
line-height: 3.5; /* <number> values */
line-height: 3em; /* <length> values */
line-height: 34%; /* <percentage values */
line-height: 50px; /* <Pixel> values */
line-height: inherit
Hope this helps...
You can use
height:auto; in both
Related
I am having trouble scaling a repeating image to the height of the document in html.
I can clearly see how large the html element is using the inspector.
I have set the div's height to 100rem, which should scale it to 100% of the height of the root element (which as far as I understand is the html element).
CSS:
#left-buildings{
left: 0;
float:left;
}
.buildings{
height: 100rem;
position: absolute;
width: 5%;
top: 0;
background-image: url(../media/images/city-side-seamless.png);
background-repeat: repeat-y;
background-size: contain;
}
HTML:
<div class="buildings" id="left-buildings"> </div>
<div class="buildings" id="right-buildings"> </div>
The problem is, it does not scale to the correct size.
screenshot showing that the element is not spanning the height of the page
Try changing the height to 100vh.
rem is the relative to font-size of the root element
I would put the images as an img tag inside the divs, and then you can just style them to 100% height.
I managed to get around the problem but setting the height of the buildings to a measurement in pixels that fits length of the page. This prevents the buildings form scaling when one zooms in on the page. Quite conveniently, it also lets the ends "overflow" and doesn't extend the page height when you zoom. Not too sure why that happens, but I'm not complaining XD.
(Similar questions are already asked at stackoverflow, but this question has more constraints, such as both a specific max-width, max-height, a required specific height and width, and no layout shift.)
Problem:
I want to have a responsive image with the following constraints:
max-width: 100%, so that it doesn't overflow to the right, and that it is responsive when reducing the screen width.
max-height: 200px, so that large images are reduced in rendered dimensions.
height and width html attributes set, so that the browser can precalculate the required image dimensions, so that the layout doesn't shift/move elements beside/below the image, while the image is loading. (To reduce the cumulative layout shift.)
image aspect ratio should stay 1:1
no extra margins should be created around the image
the image should be rendered with a plain html img tag, not with css background-images
the image should not be rendered in a larger dimension than its original dimension
How can I achieve this with CSS?
(If CSS cannot achieve this, then maybe in JavaScript?)
What I tried
I tried several CSS features, such as object-fit and max-width: 100% etc, but I always get at least one of the contraints failing while trying to fix another constraint. For example, object-fit creates margins/paddings for the image when it's reduced in size when the screen size reduces, as if the image border isn't reduced. This is demonstrated in the following code:
https://codepen.io/Devabc/pen/mdVvyKq
/* Should appear to the right of the Wombat */
.beside {
float: left;
background-color: lightgreen;
border: 1px solid;
height: 200px;
width: 100px;
}
/* Should appear below the Wombat */
.below {
background-color: red;
border: 1px solid;
width: 100px;
height: 300px;
clear: both;
}
img {
display: block;
float: left;
max-width: 100%;
max-height: 200px;
border: 1px solid;
/* Without this, aspect ratio is not normal.
But with this, it creates an unwanted margin. */
object-fit: scale-down;
object-position: left;
}
<img
height="533"
width="799"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Vombatus_ursinus_-Maria_Island_National_Park.jpg/800px-Vombatus_ursinus_-Maria_Island_National_Park.jpg"
/>
<div class="beside">This text should be directly to the right of the Wombat, without any margin between the Wombat and this text.</div>
<div class="below">This text should be directly below the Wombat, without any margin between this and the Wombat.
The dimensions of the original Wombat img are:
width: 799px, height: 533px</div>
(The green text should be to the right of the Wombat, without margin. But object-fit causes a padding/margin to appear with the length of the original image.)
It's feels almost as if this isn't possible with CSS, even though these requirements shouldn't be too much to ask nowadays, with responsive design being important.
How can I fix this with HTML/CSS?
I've been struggling with this for years on end, but just today I figured a way to do it when you know the image's aspect ratio, hope it helps:
Start by defining a --img-ratio CSS custom property in the img element corresponding to the image's height / width ratio.
<!-- example of a square image (height / width = 1) -->
<img src="..." style="--img-ratio: 1" />
Knowing that our desired max-height is 200px (or you could go with a generic --max-height), we know 2 variables of the equation:
ratio = height / width
width = height * ratio
Applying this:
img {
--max-height: 200px;
/* Set a baseline width for your element */
width: 100%;
/* And limit it with our function above (pick 100% with min() if this size is bigger than parent's width to prevent overflowing) */
max-width: min(100%, calc(var(--max-height, 200px) * var(--img-ratio, 1)));
}
And there we go! This should work to limit the height without extra margins even in complicated flex layouts.
Let me know if this answer is unclear, hope it helps 🌻
PS: If you can't know the ratio of the image beforehand, than maybe JS is indeed your only option - I'm yet to find an alternative 😟
If CSS cannot achieve this, then maybe in JavaScript?
I wouldn't solve this with JavaScript. I understand you want to use width & height on img elements to mitigate content layout shifts, but in this case since you must have a max-height of 200px on the image, it will cause issues on images with larger natural width. The space you see between the green text & the Wombat is not margin or padding, it is that actual content width which you have defined as 799px.
You can solve this with a bit of preparation on the data you wish to present to the user. Prepare your width as you would expect what your image width would be. width=799 in this case is unrealistic because the image will not respond as far as that because of the max-height:200px limitation - same case with height=533. The whole point of using static measurements such as unit pixels is you are already declaring that this X element will just take Y space.
<img
height="200"
width="300"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Vombatus_ursinus_-Maria_Island_National_Park.jpg/800px-Vombatus_ursinus_-Maria_Island_National_Park.jpg"
/>
If your problem is that your webpage/website is not responsive, so I would suggest you to use Viewport Units like vw for width and vh for height instead of px or % for all your elements including border and font-size because it will help you make your webpage/website responsive.
It should solve your issue but if it doesn't let me know in the comments, I will try my best to help you.
I'm trying to build a simple responsive design. At this point, I'm just battling with the header. I'd like to have a background image in the header, and as the screen size gets bigger, a different image to appear in its place. Right now I just want to get the iPhone 5/SE screen size to work. The HTML has a simple div:
<div class="header"></div>
And I am including the viewport meta tag everyone's talking about:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
CSS has the following:
* {
margin: 0;
padding: 0;
}
#media screen and (max-width: 320px) {
.header {
padding: 5em;
background: url(images/header-320.png) no-repeat top left;
background-size: contain;
}
}
When I remove the padding setting, the image disappears. If I set the padding to anything less than 5em, it adds a space between the right side of the image and the right side of the screen.
Can anyone explain this behavior, and why (it seems that) the padding
setting is necessary for the image to even appear?
If it is absolutely necessary for some reason, do I always have to set it to some arbitrary value like 5em (which I found through experimentation as opposed to any kind of logic)?
Maybe there's a clever workaround solution that I should use instead?
P.S.: this is for an eBay template, so I need to be able to do this without any JavaScript (they don't allow it).
Without padding/height
Take the below example:
console.log(`Header height: ${header.clientHeight}px`);
#header {
background-color: red;
}
<div id="header"></div>
I have set the #header element to have a background-color: red, but you can't see any red colour, right? Because the element's height is 0px by default, so the element is essentially not visible.
With padding/height
Now see this example with padding:
console.log(`Header height: ${header.clientHeight}px`);
#header {
background-color: red;
padding: 5em;
}
<div id="header"></div>
Notice the height is now 160px, and you can see a big pile of red.
To answer your question
Can anyone explain this behavior, and why (it seems that) the padding setting is necessary for the image to even appear?
Padding is not necessary. But the height of an element is.
To give height to an element, you can either:
Set height
Set padding-top and/or padding-bottom
Give HTML content (with height) to the element (i.e. texts, imgs)
If it is absolutely necessary for some reason, do I always have to set it to some arbitrary value like 5em (which I found through experimentation as opposed to any kind of logic)?
No. Read above.
Maybe there's a clever work-around solution that I should use instead?
No. Read above.
PS
By default, elements with default display: block will have a default width: 100%, but no default height value. That is why you can see the border span 100% in width but 0px in height.
Can anyone explain this behavior, and why (it seems that) the padding setting is necessary for the image to even appear?
As mentioned in the comments by #fcalderan, your div by default has no content and no styles, so it will have zero height. When adding padding (or explicitly giving it a height), the container will have a positive height and will display your image.
If it is absolutely necessary for some reason, do I always have to set it to some arbitrary value like 5em (which I found through experimentation as opposed to any kind of logic)?
It's not arbitrary -- it depends on the dimensions of your image and the CSS styles that you choose. In your example, you've setting a background-size: contain, which "Scales the image as large as possible without cropping or stretching the image."
This ultimately means that if your container is proportionally wider than the background image, it won't stretch to fit the container, so you have to choose units that are proportional to the size of the image. In this case, your image seems to be 320px wide, so setting 5em equates to 80px (5 * 16px), which is 320 / 4 -- thus proportional to the image, so you won't see any whitespace.
If you do want the image to stretch to its container, try background-size: 100%, which should stretch the image to its container regardless of the proportions.
Maybe there's a clever work-around solution that I should use instead?
No workaround needed -- it's just a matter of choosing the correct CSS styles to get the desired effect.
Further reading:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
I want a background image to appear at the top part and fully cover the width of a page. As you can see, the image is quite wide and short - https://i.imgur.com/aJb6eBr.jpg. This should be the header image of a page, with the contents of the page appearing below it.
If the browser's width is bigger than the image's original width, the image's width and height should be enlarged proportionally (together with its container - thus pushing downwards the page's contents that appear under the image).
If the browser's width is smaller than the image's original width, the image should retain its original size without shrinking, and be cropped from both sides until a 15% crop is reached from each side (You can see that the image has quite wide green areas on both sides which are safe for cropping).
The tricky part is that once 15% of the crop has been reached from each side, I want the image to start shrinking proportionally to the browser's width, thus the middle 70% of the image will always be seen, and the image will never be cropped more than 15% from each side.
The height of the image (and it's container) should rescale automatically in proportion with the image's width. If the image's height (together with its container) shrinks to be smaller than it's original size, the page's contents are pushed up so the distance between the page's contents and the image is always kept the same.
I'm looking for a clean solution (preferably with CSS only) similar to this:
https://demodern.de/projekte/mediengruppe-rtl
Any ideas guys?
In terms of using CSS it is pretty simple to make everything work as you need. In order to do this you might use the image as it is via and the same image on a parent element's background. But you will have to adjust your CSS to work with this image ONLY. In case if you will try to use another image - you will have to adjust paddings or mediaqueries. Solution that works a kind of ONE time for a specific image, but still, it doesn't use JS at all, which is great. And regarding referencing the image twice - it is not a problem for a browser. It will make only one http request for a single unique media asset so no performance problems from this perspective.
Here is a way how you might do what you want:
.wrapper {
background: url(/images/_m1NuVvd.jpeg) 50% 50% no-repeat;
background-size: cover;
overflow: hidden;
position: relative;
padding-top: 38%;
}
.wrapper img {
transform: translateX(-50%);
left: 50%;
position: relative;
min-width: 100%;
display:none;
}
#media screen and (min-width: 1338px) {
.wrapper {
padding-top: 0;
}
.wrapper img {
display: inline-block;
vertical-align: top;
}
}
<div class="wrapper">
<img src="/images/_m1NuVvd.jpeg" />
</div>
Make sure to use a proper path to your image instead of /images/_m1NuVvd.jpeg.
BTW, in future it will be better to probide links to the images in a way, so those might be reused in jsfiddle. Dropbox doesn't allow to use the image via that link.
Best wishes
i'm currently trying to make an image resize depending on the browser dimensions. I've managed to get the image to resize horizontally, if I make the browser window narrow the image will resize proportionally just fine. However when I resize the window vertically, Firefox just doesn't seem to want to do it! The code is pretty simple
<body>
<div id="content">
<img src="images/abc.jpg">
</div>
</body>
and the CSS:
#content {
height: 100%;
padding: 50px;
}
#content img{
max-height:100%;
max-width: 100%;
}
Another issue is that the image does seem to resize vertically in chrome, but i have to drag the bottom of the browser well over the image before it start doing this. I'd rather the image start to rezise as soon as the bottom content padding "hits" the bottom of the image so to speak. Hope this is making sense.
Any help much appreciated
try this, taken from Twitter bootstrap 2
html,body{height:100%;}
#content {padding: 5%;}
#content img {
max-height: 100%;/* Part 1: Set a maxium relative to the parent */
width: auto\9;
/* IE7-8 need help adjusting responsive images */
max-width: auto;
/* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Because height could potentially go on forever, you cant set the height of anything relative to the browser window to be a function of percent. What i'm saying is that you will need to put it inside of something with a fixed height to use a per-cent value. Good Luck!
-b
You've only specified the "max-height" and "max-width" properties.
If you don't specify the actual "width" or "height" properties, the image initialy takes the width and height of its physical dimensions (if not larger than the specified max-height and max-width).
Said that, the behaviour you've noticed, is correct.
The answer is, as already mentioned, to specify also a initial width or height property, dependig wether your image is portrait or landscape.
Is that what you want?
I actually just added a height to html and body, so that #contents height doesn't get to high.
body, html {
height: 100%;
margin: 0;
padding: 0;
}
(And box-sizing: border-box to #content, because it seems like you'd want that)