I am working on a website which is 1920-1080px but It doesn't fit the screen as it is too big. I have removed the margin and padding and it works but it is too big to fit the screen. there is white space on the right side of the page with no scrollbar. If I scale it to fit, It has a scroll bar and so it does not fit the screen
#Home_Page {
position: absolute;
box-sizing: border-box;
background: #E5E5E5;
width: 1920px;
height: 1080px;
background-color: rgba(255, 255, 255, 1);
overflow: hidden;
margin: 0;
padding: 0;
--web-view-name: Home Page;
--web-view-id: Home_Page;
--web-scale-to-fit: true;
--web-scale-on-resize: true;
--web-refresh-for-changes: true;
--web-enable-deep-linking: true;
}
I expected it to be full screen and scrollable.
I'm not sure I understand your problem here, but if you want your "Home_Page" div to be full screen, you should consider the vh and vw units, such as:
#Home_Page{
width: 100vw;
height: 100vh;
…
100vw being 100% of your viewport width, it dynamically adapt to the width of the browser's viewport width.
If you want to keep a minimal width of 1366px, then:
#Home_Page{
width: 100vw;
min-width: 1366px;
height: 100vh;
…
You can't fit a web page with static sizes everywhere becuase different users have different monitors/displays. Even if you achieved it in some way, the image would probably be a bit blury after upscaling it.
As DimNC pointed out earlier, you should consider creating a responsive page or set your element's height to 100vh and width to 100vw.
vh comes from vierport height and
vw from viewport width.
That way your page will "adapt" to various screen and browser sizes dynamically.
#Home_Page {
height: 100vh;
width: 100vw;
}
Related
I wonder if I can set div ratio responsive like an image in css.
For example, I have an image (800px x 400px) and set css is width:100%. When I use desktop screen (widht: 1400px), the image will auto resize and get full width of screen => image size (1400px x 700px).
But element, I have to set both width and height
Is there way to set empty width 800px and height 400px, and it will auto resize depends on the screen size, and it still keep ratio like an image.
Thank you
If your browser support allows you, you may use viewport units to convey aspect ratio for the div. The rest will be handled by the browser.
You may define class names for different sizes. The one that will work for 16:9 images is:
width: 100vw;
height: 77.78vw;
16 / 9 => 1.777777777777778;
In this case for 100% width of the viewport you need 77.78% height of the viewport applied to the element.
You can pre-define classes for different aspect ratios or use some simple JS to calculate this.
Codepen (same as below):
https://codepen.io/Mchaov/pen/vJrgYa
html, body {
height: 100%;
margin: 0;
padding: 0;
}
div {
margin: 0;
padding: 0;
border: 1px solid red;
}
.autoScale-16-9 {
width: 100vw;
height: 77.78vw;
}
<div class="autoScale-16-9">auto scale div</div>
I am trying to set the width of my carousel to take up 100% of the width of the screen while the height takes up 35% of the screen from the top. I have tried numerous attempts to use % with height, but it just doesn't work.
This is my css:
html,body{
height: 100%; width: 100%; margin: 0;
}
.carousel-slide, .carousel-image, .carousel-inner{
height: 35%;
width: 100%;
}
/*carousel-image is the class for the images placed in the carousel*/
The reason why I dont want to use px or em is because I want the carousel to take up 35% of the screen regardless of the device the website is being used on (desktop browser, ipad, smartphone...)
Thanks in advance.
Try using 35 viewport height and 100 viewport width instead and see if that works.
.carousel-slide, .carousel-image, .carousel-inner{
height: 35vh;
width: 100vw;
}
I want to make an image stay at a certain height, but I also want it to stay at the width of the user's screen.
Here's the image's CSS:
#cafe {
max-width: 100%;
height: 700px;
}
Here's the output:
you can try this
#cafe {
width: 100%;
height: 100vh;
}
here the 'vh' means VIEWPORT HEIGHT which automatically takes the user's screen height.
When a user loads the page, I want an image to fill the entire screen. What I want is very similar to background-size:cover, but I want to be able to scroll down without the static background.
This is what I have so far:
body {
margin: 0;
}
#bg img {
z-index: -1;
position: absolute;
max-width: 100%;
}
The only problem with this, is that the image height is not restricted to the height of the browser window. height or max-height does not make any difference.
Is there any simple way of achieving this in pure CSS?
Use the vh and vw Viewport-Relative Length units.
#bg img {
height: 100vh;
width: 100vw; /* If you want it to be full width as well as height. */
}
I have the following requirements for some CSS I need to write. I have an image that needs to fit into an area, and its size needs to stay proportional.
I want it to have a max size of 25px width and 25px height. But if it is bigger than 25px width or 25px height, it needs to be resized to fit into those dimensions keeping its proportions.
Right now, I have the following:
.imageResizeAccountInfo
{
height: auto;
width: auto;
max-width: 25px;
overflow: hidden;
}
Is this the correct way to achieve what I am looking to do?
You can use in css:
background-image: url("path/image.jpg")
background-size: contain;
This will always give you an image that is 25px wide with a height that is proportional to any resizing that was done. If you want to programmatically decide if the height or width needs to be resized, you could do that with javascript.
Use this guide for maintaining aspect ratios. I use it all the time for pictures and videos (makes youtube videos super easy to resize).
Note: This would only work if you know the aspect ratio of the image beforehand, or you add some logic to determine it. If you want something to handle any image that comes in without knowing the dimensions, this won't work.
With similar HTML
<div class='imageResizeAccountInfo'>
<div class='content'>Aspect ratio of 1:1</div>
</div>
Add this CSS
.imageResizeAccountInfo{
position: relative;
width: 100%;
}
.imageResizeAccountInfo:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
.content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
And some additional CSS for customization
/* Other ratios */
.ratio2_1:before{
padding-top: 50%;
}
.ratio1_2:before{
padding-top: 200%;
}
.ratio4_3:before{
padding-top: 75%;
}
.ratio16_9:before{
padding-top: 56.25%;
}
May I suggest using:
background-image: url('yourimage.jpg');
&
background-size: contain;
Which will contain the photo to it's parent's height & width.
if you only need to resize an image at most at 25x25px and keep aspect ratio you only need to set
img {
max-width: 25px;
max-height: 25px;
}
http://jsfiddle.net/3rfXa/
there are three cases, a squared image will be resized to 25x25, a portrait image will be resized to somethingx25 and a landscape image will be resized to 25xsomething (with something less than or equal to 25)
maybe i don't really understand the question, cause all the other answers seems to be too complicated for a resize
note that max-width and max-height are not supported on older ie versions