Probably a simple fix here, but I have 3x images in line I want to stretch across the browser window, no matter what resolution.
I've messed around with percentages in CSS but I can only seem to control one object.
My guess is to possibly create an individual div for each image, then assign each div a percentage of the screen, so 1/3 of the screen's width is reserved for each image - this will then stretch / re-size depending on resolution.
Can anyone help point me in the right direction? Not sure if I'm thinking too much into this.
Cheers!
Just add:
width: 33.3%;
To your:
img.selector1 {}
Related
I'm working on a website. There's one problem. The slider won't fit in the frame without stretching.
Slider Image is full width of screen and i have defined height for it.
In CSS part i have applied object-fit: cover but this crop my image
I hope you guys can help me out on this. I'd tried alot and also asked some other people but they can't help me with this.
Or Should i restrict my client to use image of that resolution only?
Yes Mostly you should restrict the client from using different ratios, or resolutions, because you are using the full width aaaaand defined height, defined height is very limiting in your case, what you can do is use
object-fit:cover;
object-fit:center;
but that doesn't stop the cropping it will just focus on the center of the image when cropping.
So the subject is a bit lengthy. Anyway, what I'm basically doing is trying to get a unit be a specific height (366px to be exact), but I want that height to scale DOWN if the resolution drops, thus the "min-height: 366px" is naturally out because of that.
I did come up with a rather crummy solution where I inserted an image that's that height, but the image itself is 366 pixels tall and 100% transparent. That was the only way I could really get the container be the right height.
I need this height because the container will then contain more images within it that scale. These images are absolutely positioned within the container and are on top of my invisible image.
So is there any way to have a "min-width" that then scales as size goes down or am I out of luck?
Thanks a lot.
Em.... what about max-width 366px? that should work and.. did You use (it is probably not same as this)
I do not know how resolutions work. If I set the width of my container elements to 1000px and the user opens the page from a 1300px resolution screen, then the right part of the screen 300px would be left white. I don't want that to happen. One way I know is with CSS Media Query but that way I'd have to write tonnes of lines of code. Also I don't want to do it with jQuery. Can someone explain me how resolutions work and how I can create resolution independent elements on my web page?
Use percentages instead of pixels.
for example
div {
height:60%;
width:40%;
}
Using percentages instead of pixels will make it the right size no matter what screen.
I have an HTML page that is using Bootstrap to show a weather forecast. This page is ultimately going to be shown inside of an iframe, so it has fixed dimensions. When the width is >= 768px, I want the images to show horizontally. This works fine when you make the browser wider. When the width is <768px, I want the images to stack themselves and shrink so that all of the text and images fit within the dimensions of the iframe. This is where I'm having trouble.
Here's my fiddle. I've used a parent div with fixed dimensions to simulate the iframe, and set its background color to show where the content overflows its parent. What should be showing is the day, followed by the image, followed by the high / low temperature beneath the image. This should then be repeated for Saturday and Sunday. Instead, the content is overflowing its container and being cut off. Also, the text is not showing in the proper order. I want to fix this while still ensuring that the horizontal images don't break when the browser is wider.
It's a bit confusing for me i guess as I'm still unable to understand your question completely. But is that what you are looking for?
http://jsfiddle.net/ALkKB/15/
#media screen and (max-width: 768px) {
#iframe{width:100%; height:auto;}
}
I appreciate all of your help San. I ended up eliminating the use of Bootstrap and just implemented my own CSS media queries based on the orientation of the iframe. I also had to use some Javascript to calculate how much room was left for the images once all of the other data was loaded and displayed.
Thanks again.
This is more of a general question; but I notice on some webistes (including stackoverflow) That when content is off the screen and the user has to scroll to the right background images/color stop at 100% of the screen view. Does anyone have a better idea how to fix this.... other than setting max and min widths?
here is a google doc of two different websites to explain what I am talking about.
https://docs.google.com/document/d/133Uek4Fd3G3eB6Zz4CNomPGzARevCUg4fAV4Xhvin-o/edit?usp=sharing
Josh C's response is spot on. If the elements that have background colours had min-widths that matched the content width (980px in stackoverflow's case) then the issue would be resolved. This is not only the easiest way, but probably the best practice)
Your alternative, if you don't want to set max and min values to your elements that use percentages, would be to not set fixed widths on elements (in the case of stack overflow, it's content width is fixed at 980px, and most everything else is fluid).
If content and it's children used max-width instead of width this problem would disappear.
Alternately, as lookingGlass points out, more fluid responsiveness.
Add breakpoints so that when your window size is below/above your ideal the site adapts.