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
}
Related
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.
I’m trying to create a site using Wordpress. I created a theme and most of my pages are created using page templates because I wanted to stay away from the blog look.
Everything looked great until I viewed the site on my ipad in portrait mode. I have a huge white space at the bottom of every page. I used Chrome Canary’s developer’s tool but could not find the element that’s causing the whit space.
I’ve been searching forums for days and tried solutions that have helped others with the problem. No luck so far.
I tried using media queries like:
#media only screen and (min-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 1) {
Html,body{
Overflow:hidden;
}
Still have the huge white space at the bottom of every page when I’m in portrait mode on my ipad.
Please help me find the fix for this problem. Here’s a link to my site: http://www.davidsdrift.com/
Thanks for any help.
Remove the two background-size properties from body and add background-size: cover;.
Add this selector
html {
min-height: 100%;
}
Your background should now cover the entire screen regardless of resolution. You may also wish to add background-position: center center; too.
Example
html {
min-height: 100%
}
body {
background: url(images/homePage.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
If your site design has a static height, then any browser that is taller than that height (most mobile browsers, since they're in portrait orientation) will just stop at that point, and not put anything else below. The browser just defaults to "nothing" (i.e. white space) after that.
You could set a simple background color, so that it's not just defaulting to white below your designed area (body {background-color: #CCCCCC;}), or try something fancier than that.
Or, (gulp) you could totally re-jigger the site to not use a static rectangular design.
It depends if you want to put image to fill 100% your height just add
background-size: 100% 100%;
Else if you want to fill content use percentage not pixels for full height
To add to Joe's answer: The reason why you are seeing white space on the ipad in portrait mode is because of the aspect ratio and orientation of your background image.
There are countless fixes for this, however they all depend on what you would like to do with that extra white space. You could enlarge your background to cover the whole space, repeat the background, use CSS3 properties to create a mirror effect, etc.
Assuming you just want the background to take up the whole space when in portrait mode use this:
#media (orientation:portrait){
html{ min-height:100% }
body {
background:url(images/homePage.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center center
}
}
The "rh" logo on my site is responsive vertically, ie fits perfectly to a tall thin window, but does not resize to a wide short window. Could anyone help me make the logo responsive to both width and height?
here is the website... (takes a bit to load up)
http://rhwebdesign.co.uk/
Here is my CSS:
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
To be very specific and address your questions about the logo, consider setting the max-height relative to the window's height.
You have:
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
.hero-logo img {
max-width: 100%;
min-height: 100%;
padding: 20px;
}
In order to scale the logo, add in to the latter block:
max-height: 100vh;
This sets the images maximum height to 100% of the viewport height, which appears to be what you desire here. Note that there is some text beneath it, which is not displayed, since it is text wrapped in an H5. These two lines are 68px tall (40px padding plus 28px for the text). So, you can adjust the above to:
max-height: calc(100vh - 68px);
It looks like in landscape mode (480x320), there is a script not calculating the size of margin correctly.
<div class="container hero-content" style="margin-top: -97.5px;">
have a look in main.js for this function:
heroContent.css({
"margin-top" : topContentMargin+"px"
});
Which is this:
topContentMargin = (heroHeight - contentHeight) / 2,
heroHeight = windowHeight,
contentHeight = heroContent.height(),
I haven't really looked into why it is calulating it incorrectly. My guess is that heroContent is too high for landscape mode because the image becomes 441px high with the media query max-width:100%. So it tries to add a negative margin to compensate.
My advice would be to remove the jQuery calculation of the hero content sizing and apply sizes using css and media queries only.
Edit:
You need to be more specific with your css. Learn some more about css specifity. You should include your largest media queries at the top, so the smaller ones will take precedence at the bottom. Makes things easier. Also IMHO, I wouldn't use queries for anything larger than iPad. ie. 1024px. Although you should always test on newer devices if possible.
You will need to specify the height of the video for each specific device size. I can't tell now, but maybe jquery was determining the section heights, so now the css is determining the video height.
So at the bottom of your style sheet, try this.
div#bgVideo.skrollable.skrollable-between video#video_background {
min-height:940px !important;
}
#media (max-width: 480px) {
.hero-logo img {
max-width:55%; /*looks nice at 480 */
padding:20px;
}
div#bgVideo.skrollable.skrollable-between video#video_background {
min-height:320px !important;
}
}
#media (max-width: 320px) {
div#bgVideo.skrollable.skrollable-between video#video_background {
min-height:480px !important;
}
}
But Richard, to be honest, you should be troubleshooting and testing the design yourself. How will you ever learn if you don't try. Remember, firebug is your best friend :)
I currently have a header which is of an image (the width = 1920px and height = 250) It sits at the very top of the page, and looks well with some resolutions.
But when i got to a resolution that actually changed my screen size, the image is still 1920px and then allows me to scroll. Is there a way of making it scale down to fit the page?
You can make your image responsive.
You can use bootstrap and add class for your image.
e.g
<img src="xyz.png" class="img-responsive">
OR
You can manually try to make your image responsive with CSS rules.
e.g
max-width:100% !important;
max-height:100% !important;
display:block;
You will have 2 things here.
As the screen size differs your image should get fit in the window.
You need to maintain the aspect ratio of the image in responsive design, otherwise your image will be stretched out (It is a challenge to maintain aspect ratio in responsive design).
For the first one you can use width:100% and height:auto also max-width:100% to make sure it does not cross your section.
If you are designing based on some particular resolution then use media query
#media (max-width:768px)
{
width:... // define your width based on the resolution
}
Now the 2nd point : How to maintain aspect ratio. Follow the steps here:
http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/
Also, found a stackoverflow post, which will be useful to you :CSS force image resize and keep aspect ratio
You may use the responsive image code that is:-
img {
width: 100%;
height: auto;
}
Else if you have images for multiple resolutions you are recommended to use media Queries:-
//set width as per requirement
#media (max-width: 900px) {
background-image: url(img/cover.jpg);
}
How are you showing the image in the header? Using img tag or using background-image CSS property?
If you are using <img> tag, then you need to set max-width: 100%;
If you are using background-image property, then you need to set background-size: 100% auto;
Hope this help
Thanks
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.