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
Related
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
}
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/
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.
When I get a psd(1750*2400),I found the images and font size were too big for lower resolution.Is it possible to make page fit in different resolution ? Thanks.
I usually divide this into 2. What I mean is that the dimension of the website, in this situation, is 875x1200. Thus for every spec, such as fonts, block width, image width should be divided into 2.
For example, the Header font size is 42px then you could apply 21px.
For images you can do this purely with CSS by specifying the width and height of your preference. The browser will resize the image (though if you don't choose the right aspect-ratio the image may look obviously expanded or compressed).
img {
height: 300px; //whatever height you want
width: 200px //whatever width you want
}
For a responsive layout you can use CSS3 media queries to achieve the best look on different resolutions.
Example for responsive layouts:
img {
height: 100%;
width:100%
}
#media screen and (max-width:64em) {
height: 70%;
width: 70%
}
As for the font-size, you may have to sacrifice pixel-perfection at times for the best look and decide for yourself whether the font looks appropriate for the display or not.
This too can be controlled by using media queries though:
#media screen and (max-width: 32em) {
font-size: 1.5em
}
I have to cut PSD file into CSS and HTML. The problem is container with background image has 1160px of width. This container have only background image on right side so I could be hidden on smaller resolution. Main content container have 996px so it's good.
I'm trying to do it this way:
if resultion is more than 1160xXXX show whole image on right side,
if resolution is less than 1160xXXX hide a smart part of image on the right side.
Image on the right side have to be always on the same place - its relative to the .container .inner which together looks nice.
My code:
.container {
max-width:1920px;
margin:0 auto;
position:relative;
}
.container .background {
background:black url("../img/woman.png") no-repeat scroll right top;
max-width:1160px;
overflow:hidden;
}
.container .inner {
width:996px;
}
The goal is to put background image always in the same place and cut this image if resolution is less than 1160px. Any advices?
EDIT:
For no .container .background changing it's position depending on resolution... I don't want it - image have to be always in the same place.
Use media queries like
#media only screen and (max-width:1160px){
#something{
some css
}
}
You can read more about media queries Here
One new approach often used for mobile and tablet browsers, is to use pairs of images of different sizes. In responsive design, for example, you can use the CSS #media to check the device window width, and return a larger or smaller image depending on the circumstance.