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.
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;}
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
}
I'm working on recreating my website and I would like to have images that appear on the size that categorize the sections. I would like these images to be responsive based on the height of the container. For example, if the container is 600px tall I want the image to be 600px tall regardless of the width. Right now I'm using background-size: contain; which works in desktop mode, but after a certain width, the image starts to get shorter in favor of staying the width of the container.
It works fine in desktop mode:
In mobile I get this:
When I want this:
I hope that makes sense. Also bear in mind that this isn't a finished concept so it looks pretty bad as it is even when I "hack" it to work in mobile
You can use media-queries:
#media only screen and (max-width: 600px) {
img {
background-size:cover;
}
}
You can read more about media- queries:https://www.w3schools.com/css/css_rwd_mediaqueries.asp
You can read more about background-size:https://www.w3schools.com/cssref/css3_pr_background-size.asp
One important thing when asking for help is doing your best to explain your problem as best as you can. Things like putting part of the code you have for example could really improve how fast you'd be answered and have your problem solved.
With that said, I'd recommend changing your css to something like the following:
.hero {
width: 100vw;
height: 100vh;
background-image: url(../images/hero.jpg);
background-size: cover;
background-position: center, center;
}
The background-size: cover along with background-position: center will make sure that it displays in the way you want in mobile. Not necessarily exactly that part of the image though, maybe you'll have to work on an image editor.
The width: 100vw and height: 100vh that I used in this example, are the size of the container in which the image is the background, that is also relevant when it comes to how the picture is displayed. vw is viewport width, vh is viewport height. This unit is good for working with responsive displays, as it takes in consideration the screen to determine the size of whatever styling you put it in.
Since this is already working in desktop in the way you want, I'd suggest using a media query so you'd only change the way it's displayed in mobile, for example.
It would be something like
#media only screen and (max-width: 480px) {
.hero {
width: 100vw;
height: 100vh;
background-image: url(../images/hero.jpg);
background-size: cover;
background-position: center, center;
}
}
As suggested in another answer, take a look into media queries to choose which one is appropriate for what you're trying to achieve. You can use many media queries, such as one for mobile, one for tablets and one for desktop.
Is there a way to make a website 100% fluid?
As in, fill the background edge-to-edge with an image, no matter the size of the browser window. Also, have it resize larger or smaller as the browser window changes without neccesarily retaining aspect ratio. Images inside divs and font sizes should obviously resize accordingly and maintain the same amount of white space so the page shows exactly the same content in screens from 800x600 to 4K Ultra HD, being the idea to above any kind of vertical scrollbar. Let's forget about mobile and tablets for a moment.
What I have tried for background:
body {
background-image: url(./Si0rPf7.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
Which will fit background as long as the aspect ratio of the image is kept, the moment it changes you will see white spaces on both sides. If cover instead of contain, image will get cropped, which is undesirable if we want to show our whole background to everyone, even if we have to stretch it.
Now, for img src I've had half success with two methods:
.image_1 {width: 100%; height: auto;}
and
<img src="img/image_1.jpg" width="100%"/>
None of them seems able to react to both width and height. Looks like you have to choose between one or other.
For font-size I would just use vw and hope for the best.
You want
background-size:100% 100%;
You should look into the flex model: https://philipwalton.github.io/solved-by-flexbox/demos/grids/
I am having an issue with trying to make a fluid HTML page. (I wanted to take into account different sized resolutions, so I'm working with background images with widths of 1920px)
So I wanted to make a couple stacked divs, each with a background that gets resized via background-size. However, I'm noticing that I can't get 100% or contain to work as the property value unless I also manually set the height of the div. I can set it manually with a set px or %, but I feel like this isn't the best way to dynamically set the height of the div.
So I'm wondering if there's a better way to set the height of the div, so it's set to be the same height as the height of the image with the background-size property, so I don't get all the white space after the image, if the div is too tall.
I've got a live example here: https://jsfiddle.net/fcb1wcth/
#header {
background-image: url('http://i.imgur.com/x5wEY56.png');
background-repeat: no-repeat;
background-size: contain;
height: 710px;
color: #ffffff;
}
For example, this first div above... Since I'm working with a smaller screen, 710px is way too tall! The background-size does its job, I just don't know how to set the height correctly, and using a property value of auto doesn't help it.
// I've never used background-size before, so maybe I'm doing this wrong, but I wanted to try and experiment with making a page that works with any resolution.
Thanks for any help!
I think that better solution is to use a fixed height in combination with background-size: cover. Like this:
#header {
background-size: cover;
height: 400px;
}
FIDDLE: https://jsfiddle.net/lmgonzalves/fcb1wcth/2/
in this example solve this issue.
http://www.jqueryscript.net/animation/Minimal-Full-Screen-Vertical-Slider-with-jQuery-Scroll-On-Scroll.html