Dynamically sized images - html

I'm trying to add a responsive image to a front page that expands to the full width of the page. Similar to what many sliders do, but I only have one image so a slider is overkill. I've set up a div and set it's background image and background-size to 100% and that achieves the width. My problem is the height. I have to use a fixed height in order for the div to appear. I've tried setting height to auto, but then I don't get an image. I tried using this method:
How can I resize an image dynamically with CSS as the browser width/height changes?
but I can't seem to get the width to scale correctly. Using a fix height works fine until the browser window expands past the size of the image, and then it starts to cut off. Any thoughts on how I can make the height scale dynamically just as the width? Any thoughts would be greatly appreciated!
My code:
CSS:
.banner {
max-width: 100%;
height: 720px;
background: url(../images/homepagebanner.jpg) no-repeat left top;
background-size: 100%;
}
HTML5:
<div class="banner"></div>
I am using bootstrap, but this is outside of a container so it shouldn't be affecting this piece of code.
EDIT Here's the codepen:
http://cdpn.io/xLvzA

Have you tried setting the height of html to 100%, then setting the height of your banner to 100%? Adding a codepen demo to show your exact issue might help a bit better to help vizualize the exact problem you're having

Related

After setting up a background-image in CSS, content is being cut to empty space if the window is resized

I'm having a problem with my layout when I set a background-image with CSS. I've looked through Google and SO but couldn't find someone with exactly the same problem, and none of the solutions applied.
What I'm trying to do is create a page with a background image that fills the entire height of the screen.
Consider this simple html page:
<html>
<body>
<section class="main-section">
<div class="my-div"></div>
</section>
</body>
</html>
In CSS I have two selectors:
.main-section {
background-image: url("../images/image-hero.jpg");
height:100vh;
}
.my-div {
width:500px;
height:500px;
border-style:solid;
border-color:white;
}
And it works fine, except when I resize the window. If the browser is resized to a value that is less than the div's width and height, scrollbars appear and the content is cut. Here's a 300kb gif that illustrates the behavior.
https://i.imgur.com/fS46akt.gif
I tried changing the height to % instead of vh, auto, tried messing with the minimum-height property using every possible value, tried using the background-size property, and setting different values to all these properties.
What I want to achieve is the following: the background image fills the entire height of the screen while keeping its original aspect ratio, it's ok if it overflows horizontally. When the windows is resized, the background image should resize accordingly (or not, it doesn't really matter) and if it becomes smaller than its contents, they should still be visible after scrolling, instead of cutting and showing white/empty space.
I think I'm missing something really obvious or I'm not using the background-image property as it's intended. Please help.
Add background-size: cover; to .main-section

Image width doesn't change when resizing window in Firefox

I created a Fiddle here to illustrate the problem. Just try to vertically resize the preview window in Safari/Chrome vs. Firefox.
I need the images of my slideshow to be in the container .slideshow-elem. Some of them are tall and could fill up the whole height of the slideshow, some of them are not, that's why I can't give them a fixed 100% height. My goal is to vertically center those images which are not tall enough and let the others fill the entire slideshow vertically. All of this while keeping the aspect ratio and a dynamic width.
I have done this with the max-height attribute on the images and on the .slideshow-elem container. It works in Chrome and Safari, but not in Firefox.
Any ideas on how to get this done in Firefox? Thanks a lot!
Edit: Also I don't necessarily need the height to by dynamic when resizing horizontally. It is okay for the image to be cropped then. Therefore I updated the Fiddle...
Edit 2: Okay, so I took out max-width: 100%; on .slideshow-elem and it turns out that was all I had to do... Now the image scales properly on Firefox, too. But could someone explain this to me?
If you change .slideshow-elem img to
.slideshow-elem img {
max-height: 100%;
width: 100%;
}
It will scale properly in Firefox, from your question, you were mostly concerned with keeping the height, so I assume not having it set at max-width is not an issue.

SVG image with fluid width and fixed height (stretch/shrink with page but keep height)

I have an SVG image that I am trying to use in my page that I would like to stretch with page. The same CSS that works with non-SVG images doesn't work for the SVG. As seen in the quick fiddle here -> http://jsfiddle.net/TUby3/
My HTML
<img src="image.svg" id="topHeader">
My CSS
#topHeader {
width: calc(85% + 10px);
height: 46px;
}
I've been trying different things in my CSS but can't seem to get anything to work. When I make the page smaller, the width of the image does get smaller but the height does not stay fixed, the height shrinks in uniform with the width.
Does anyone know a solution to this that does not involve trading the SVG for a PNG or JPEG?
Try this:
http://jsfiddle.net/TUby3/1/
Just put a div with a set height around it.
html
<div id="test">
Your Image
</div>
css
#test{
height:"60px;
}
You could probably achieve the same effect you are after by setting it as a background image to a div and using the background-size css...
background:url(http://www.adobe.com/inspire-apps/exporting-svg-illustrator-0913/fig14/img/napoleon%20for%20svg%201.svg) left top no-repeat;
background-size:100% 100%;
(That said, Mark's solution works fine for me in Chrome)

Background disappears with scroll bar. Why?

Here's what I have: 800px width div's inside a 100% width container with a background image repeating horizontally.
Live: http://www.baskra.com
When I resize the browser window, a scroll bar is generated. When I scroll it, I see that the background image is only applied to the original unscrolled region, as seen above.
How can I solve this problem?
JSFiddle: http://jsfiddle.net/wcdXK (Not every image is working, but I believe the most important here is the CSS.)
You should replace the "width: 100%" from .pages-container CSS class with a "min-width: 800px" – it will force background to be the same width as the container if the window size becomes less than 800px.
.pages-container {
background-attachment: scroll;
background-image: url('http://baskra.com/images/bg/bg-scroll.png');
background-repeat: repeat;
min-width: 800px;
left: 0;
}
Check it here : http://jsfiddle.net/wcdXK/3/
Because the width applies to the area of the containing block, as the overall container is smaller the background shrinks to apply to the same area (along with the pages-container element).
I noticed you are experiencing many problems on your layout (you posted a similar question)
You should read a Responsive Web Design article trying to understand media queries
like this (random picked from google) http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/

html/css issue.. full width background without scroll

I have been struggling with this for the past hour and I was wondering if any of you had any thoughts on this..
A client needs a nice big background image on the site. I cannot used this image as a background for the body or any div because I don't want it to be cropped horizontally. If the browser's width is smaller, the background should scale down.
So I just use an img tag with absolute positioning and z-index.
However(and this is where it gets tricky), the image is quite tall, and I don't want scroll bars on the side after the useful content.
Overflow=hidden on the body is useless because I do need scrollbars if the content is too much, but smaller that the image.
overflow=hidden on a div which has height,min-height and max-height set and contains the image just doesn't seem to work. I have no idea why.
And min-height, max-height and height is not working for the body tag either.
Any helpful ideas? I think this is doable by javascript, but I don't want to run a script every time the window is resized. I would prefer a html/css solution
PS: I have all browsers(opera, safari, ie8, firefox, chrome) open right now, and this is not just a browser issue.
I can't build a test case right now, but an absolutely fixedly positioned div with position: fixed; width: 100%; height: 100%; overflow: hidden and the image inside with width: 100% might do the trick. It will scale the image to the window's width, but won't create horizontal scroll bars.
The rest of the page may need a z-index to be displayed above the div.
Note that the body will have to have min-height: 100% for this to work.
position: fixed won't work in IE < 7.