I'll be working with full-screen banners, just like this one or this other one and for this purpose I'm using a plugin in a Wordpress site.
Now I have set their respective widths to 100% (to avoid an x-axis scrolling and also to make the banners display fully on every screen size). Problem is that if you grab your browser screen to make it smaller or you open the web site on small screens (13 inch or iPads) the images displayed on banners squish.
I need the image to be cutted off while resizing and the only way I know for that is to change the banner's div class from width: 100% to width:the amount of pixels I want but in this way, obviously, if the screen from where you enter the site is smaller you'll get a x-axis scrolling and if it's bigger you'll have the banner cutted of when it reaches the amount of pixels previously set up in it's width.
How can I get the images not to squish, but to get cutted off making it's div width display 100% on any browser?
Banner's actual code:
.bannercustom {
position: relative;
z-index: 11;
left: -2px;
width: 100%;
top: 0px;
float: left;
height: 440px;
}
Do you have the ability to set the banner as a background-image to a div? Then you can set the background-scale to 100% and let the div resize as needed.
Why not just use: width:auto; ?
Should work.
Related
I have been reading stack overflow for some time but this is my first post!
I have this website: https://oliv-collection.com/.
The banner on top is full width as long as the screen you view it with has a resolution of less than 1600px (the original picture width). Once the resolution is greater than that, the banner does not cover the entire width of the page.
Is there an easy way with CSS to make the width and height increase so as to cover the full width? I have been fighting with Google Inspector but can't figure out what to do!
Thanks
There might be better ways to do this, but I managed something close to what you ask for by changing the styling of the banner images to the following:
.slick-slider .nm-banner img, .nm-banner img {
display: inline-block;
width: 100%;
}
What I did was replace width: auto; to width: 100% to make the image resize correctly, and remove max-width: 100%; and height: auto;. With my change, the banner image will increase with the width of the screen even above 1600px. This works for me in Safari on macOS.
You should use
width: 100%;
Whatever the width of the screen is, the banner will be with maximum width.
Set the margin of the HTML body in CSS to 0.
body {margin: 0;}
Info: I have a cropped image used as a background image for the top of my webpage. In CSS I've defined in px the size of a div containing the image - which is cropping the image. (I'm doing this in Squarespace). So when you enter the page you see the background image (and some text) filling the screen and you then scroll down past the image.
The problem: when I reduce the size of the web browser window the div, of course, maintains the same px height. This means the image ends up being background for most of the page - I just want it to be on the top when you enter the page.
The question: how do I make the cropping div responsive in height? As far as I have researched I can only set the value in px which isn't responsive-friendly... The following code is based on my external screen size. So I need that height px for large screens.
My code:
.header-background {
position: absolute;
top: -160px;
left: -335px;
right: -335px;
height: 850px;
z-index: -1;
overflow: hidden;
background-size: cover;
background-position: center;
background-image: img src('/s/Sams-sort.png')
Give it to a free height that takes up the higher space only
height:auto
Using Object fit, if I set the height to 100vh it works properly, though if I change it to anything else, it no longer remains the correct size but shrinks down to fill the space as the window shrinks.
Is it possible to keep it proportional like at 100vh but to not actually have it take up the full amount of available space? I am ok with portions of the video being clipped off, I just cant seem to figure out how to get this to work.
Basically what I want is that on mobile 100vh is fine, I have text overlay on top of the video so the extra space works. But on large screens, there is too much unused space over this video (another as well on the full site but figure the same methods can be used to fix that also) and I would like to probably shrink it down to closer to 50 to 65% of the total size.
Below is the CSS I am using on the video currently, there is also a link to a live site of the video since I dont believe I can upload that to SO.
https://tsukiyonocm.github.io/test/
#services {
position: relative;
}
#servicesVid {
height: 100vh;
width: auto;
position: relative;
-o-object-fit: cover;
object-fit: cover;
}
your question is not very clear but i would recommend using Media queries to apply different styles for different media types/devices.
for example if you want to set a specific style for larger screen devices such as laptop you have to use :
#media screen and (min-width: 1400px) {
//your style for these devices that have 1400px+ screen width
}
So I'm building a website, which is suppose to have an image slideshow
I've set up a div for it:
<div id="slideshow">
</div>
with its corresponding CSS:
#slideshow {
position: absolute;
height: 28%;
width: 99.9%;
top: 10.5%;
margin: 0;
}
I've been trying to find a proper image size to fit the div, so that it doesn't show up differently on different screens. I've tried finding an unnecessarily big image, so that it would "scale down" to the div using height: 100% and width: 100%
But it always turns inconsistent in the two screens I test, normally too stretched. One screen has a resolution of 1336x768 and the other 1920x1080.
How can I keep an image from changing its ratio on different screens? (I think of a banner and how it's always consistent in every screen without stretching)
Typically when working with any kind of responsive design that will work across multiple screen resolutions you use the following.
img {
height: auto;
max-width: 100%;
}
This will also assure that the image keeps the correct aspect ratio.
Here are the full width banners which cause this issue. Im using a Plugin which enables you to upload a certain Image and set it up with a specific ID. So I Uploaded a jpeg with 2000px width and 600px height. Then I assigned the following CSS:
#bannerPages {
height: 296px;
margin-top: 183px;
width: 100%;
}
The banners look good on full screen, but they squish while down scaling the browser width. So I'd like to prevent the squishing effect and cutt the image while down scaling the browser size. How could I achieve this?
Looks like you have a media query that is making the width 140px !important.
Try changing the img on the media query to this
img {
width: 100%;
height: auto;
}
I played around with this for a while, but ultimately came up with two solutions depending on your needs. The first is easier to implement and more accurate to your requirements.
Remove the image from the bannerHome element and add the following code to the CSS.
.bannerHome {
background-image: url('http://www.gonpires.com/carmacks/wp-content/uploads/useful_banner_manager_banners/6-homeJV.jpg');
background-position: center center;
background-size: cover;
height: 890px
}
http://jsfiddle.net/9sqjs/2/
That method will only work in IE9+, Firefox Chrome, etc. Nice solution if you don't need IE8 support. You'll have to adjust your media queries as well. The other method requires more work and wouldn't crop the sides but it would fit and resize the image inside a 100% width container which would be cross-browser.
http://jsfiddle.net/Q64S2/1/
Have you tried making the image a background image instead?
For the .useful_banner_manager_banner classed div, you can set that large background-image so it'll essentially crop itself based on screen size.