This question already has answers here:
Maintain aspect ratio of div but fill screen width and height in CSS?
(9 answers)
Closed 8 years ago.
If I have an element (such as div#frame) that I want to populate as much of the screen as it can while still maintaining a designated aspect ratio (such as 16:9), what styles must I apply? I am certain there are a handful of different solutions in Javascript, but I want to try an approach with only CSS.
I've searched around, and although there are already some solutions in CSS, they use a percentage padding, which is calculated by the value of the width, which means the aspect ratio is only maintained when the browser is horizontally resized, and not vertically resized.
#frame
{
/* centered */
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
position: fixed;
/* aspect ratio */
width: 100%;
height: 0px;
padding-bottom: 56.25%;
}
This works good enough, but I want a solution that will still maintain the aspect ratio of the element when resized both horizontally and vertically, as seen in the image I've embedded below.
I don't think it is possible to set the width of an element based on the height, using css properties as they were meant to be used. So you better start considering JS there ;)
There is a hack involving an image though, but it is not great. Maybe you can expand on the idea (I would still prefer JS).
You will need an image with the maximum size you want your frame to be. A transparent gif should do. Then you let the native behaviour of the image set the wrapper's size, using inline-block on the wrapper. Then you use an absolutely positioned element inside the wrapper to hold your content:
<div class="wrapper">
<img src="https://cdn.boldernet.net/0/0/856/856567-450.jpg">
<div class="content">
content
</div>
</div>
CSS:
body {
text-align: center;
}
.wrapper > img {
display:block;
max-width: 100%;
max-height: 100%;
}
.wrapper {
display: inline-block;
position: relative;
top: 50%;
}
.content {
position: absolute;
background: blue;
left: 0;
top: -50%;
width:100%;
height:100%;
}
Related
I have image in the header and populate its source from the database, so it has different width and height. Image dimensions could be max 2000x2000px. I'm trying to scale it but when it's very large e.g more than 1000px it's very big and it's not looking good.
This is what I currently have.
#image {
position: absolute;
display: block;
top: 20px;
left: 20px;
height: 50px;
}
<div id="wrapper">
<img src="some-dynamic-url" id="image">
</div>
I've also tried with background-size: cover but it's not stretched and how to preserve the aspect ratio and set max-width and max-height not to be so big?
Updated. My current code is the following:
#image {
display: block;
top: 20px;
left: 20px;
width: 100%;
max-width: 170px;
}
<div id="wrapper">
<img src="some-dynamic-url" id="image">
</div>
Will the height always be 50px? If not, you should remove that from your CSS and instead use height: auto;.
Also, if it starts to not look so great at 1000px by 1000px, maybe set width: 1000px; and max-width: 85%; to keep it at that width and make it responsive on smaller screens. You can adjust the max-width value to your liking or remove it.
So, the CSS would change to:
#image {
position: absolute;
display: block;
top: 20px;
left: 20px;
width: 1000px;
max-width: 85%; /* adjust as needed or remove */
height: auto;
}
Here's an example.
If I'm understanding correctly, you have a header container area where various images get populated, and sometimes the images are too big for the container and not looking good. (A screenshot would be helpful if my summary is wrong.)
The trick here is to set the image width to 100%, then set a max-width to either the image or the header container. (I picked 1200px for this example.) That ensures that your image will fill up all of the space, but not go over.
NOTE: this will cause images with widths smaller than 1200px to be stretched to fit, and may not look good either and would require some more coding to fix.
#image {
position: absolute;
display: block;
top: 20px;
left: 20px;
width: 100%;
max-width: 1200px;
}
<div id="wrapper">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/cc/ESC_large_ISS022_ISS022-E-11387-edit_01.JPG" id="image">
</div>
However, if you're looking for a work-around for images that are smaller than 2000px wide, I'd suggest something like centering them with a colored background, or perhaps tiling them. Those solutions will be good for some content, and ugly for others - it depends what you images are like and how the site looks. But those are some ideas.
You may want to use the simple trick to automatically fit size with:
img { max-width: 1200px; height: auto;}
I guess 50px for height is not a must since you thought using "cover" in backround property. Also if you wish this sort of behavior from your image, you can add "object-fit: cover;".
Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
EDIT
You can also use that version of the "trick":
img { max-height: 100px; width: auto; }
Note: Using files that big for logo is not recomand. If you got access tto database you should consider save a copy to more light version with less pixels.
I'm trying to style a typcial banner image for a site, so that for narrower viewports the vertical height is maintained and the image effectively stays the same size by going beyond the parent element horizontally. (I think this is fairly typical banner image behaviour - but feel free to correct me if I'm wrong).
(browser target is ie10 and up). The below incorrectly keeps the image ratio and at 100% width so that if fails to match the height of the parent.
The current html is just an img inside a div tag
<div class="banner">
<img class="img-fluid" src="somepic.jpg" />
</div>
Where the css classes used are:
.banner {
content: "";
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 780px;
}
and img-fluid is a bootstrap(4) class with
img-fluid {
max-width: 100%;
height: auto;
}
Use a background-image instead, there are a couple interesting behaviours that can be used to achieve different results.
Here's my take:
.banner {
content: "";
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 780px;
background-image:url('somepic.jpg');
background-size:cover;
}
The key here is background-size:cover;, it will make sure the image stretches to cover the full width and height while keeping its ratio. That means on very wide screens, it will be made larger, cutting some height. But on thinner resolutions you'll get the desired output.
I've been handed a bunch of pages to code up with weird irregular layouts. Below is an example of what I need to create.
The key points about this are;
The elements need to be positioned pixel perfect as per the mockups.
Upon window resize, all elements and the positions need to size down/up
proportionately.
The size of the container needs to resize proportionately also, because there will be more content under the layout.
Considering each element needs to have specific positioning, it's obvious to use absolute positioning. I also note that because the layout needs to stay proportionate, positioning needs to be done in percentages.
For images I can set the widths to be a percentage and height auto. And elements can be positioned with a percentage along the x axis.
But the problem arises when I need to position from the top.
If I declare an element to be say 20% from the top, this positioning won't change proportionately when I resize the page. Also, the containing block will need to have a declared height.
The only way I can see this working is with some javaScript trickery.
But this seems fussy for a seemingly simple layout. And it's not advisable to rely on javaScript to maintain a layout.
There must be a better solution, I've seen irregular layouts like this often.
I've looked into Flexbox, but I can't think of how it can help me in this situation.
How would you tackle this layout?
You can wrap everything in a wrapper that uses the "padding-bottom trick" to maintain its ratio based on its width. Because the height of the parent element is now dependent on the width of the document, all percentage values you give to top and bottom properties of child elements will be affected by the width of the page, instead of the height.
main {
position: relative;
width: 100%;
height: 0;
padding-bottom: 120%;
}
div {
background: red;
position: absolute;
}
.one {
width: 40%;
height: 40%;
top: 10%;
left: 40%;
}
.two {
width: 50%;
height: 20%;
top: 55%;
left: 15%;
}
.three {
width: 20%;
height: 30%;
top: 60%;
left: 70%;
}
<main>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</main>
Try using this trick to scale your container proportionally
<div class="container">
<div class="container-inner-wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
.container {
position: relative;
display: inline-block;
width: 75%; // Choose the width you want.
}
.container:after {
padding-top: [$height / $width * 100] %;
content: '';
display: block;
}
.container-inner-wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Where $height and $width are numbers - the value of the height and width you want your container to be. The real value you should put in there is what you get when you divide the ideal height by the width and multiply that by 100% (the unit is going to be %). What you get then is the aspect ratio of your container, and it will stay that size and shape no matter your browser size.
You can use that on all your boxes too, just make sure that you have that inner wrap that's absolutely positioned just inside. If I was building this layout, I'd use this trick for sure.
Here's an example of someone else using this: http://wellcaffeinated.net/articles/2012/12/10/very-simple-css-only-proportional-resizing-of-elements/
please see link below
as you can see there's a text on header (header is an image)
the text is:
mail#yahoo.com (this text is a part of image)
I convert that part of header image to link with below code
<div id="hw"><div id="header"><img src="test.jpg" /></div></div>
and this is #link
#ResponsiveLink {
width: 267px;
height:29px;
display:block;
position:absolute;
top:100px;
margin-left:413px;
}
how can we make that link be responsive in other devices? for example when browser is narrow position of the a tag with #ResponsiveLink id changes but i want it be fixed over my text.
The best way I know, is not to put a big part of your screen as an image. On the other hand you probably don't want to cut the image into several separate images. So, I suggest using CSS Sprit.
After separating the image, you can put the parts beside each other using float, clear, and percentage widths, or use a framework like bootstrap.
If you still want to use the image as a whole header, in a single HTML tag which don't recommend at all, using percentage top for your #ResponsiveLink would work. You should just add width: 100% to all its parents: header, hw, and wrapper.
Following the comments:
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 0;
left: 58%;
margin-left: 0;
margin-top: 7%;
padding-bottom: 3%;
position: absolute;
top: 0;
width: 25%;
}
This will fix the problem because of the difference between percentages of position and margin, top percentage is calculated using first absolute parent's height but margin and padding percentages are calculated using parent's width. There's still a problem caused by the max width which you can fix adding a wrapper inside your #head with a width of 100% and no max width.
The other try of using floats and separated images have too many problems to write here, sorry.
What you're currently building isn't a sustainable solution and you should definitely see other replies on how to improve your site layout.
However, if you need a temporary solution, the following CSS changes will work on your current page:
#header {
margin: 0 auto;
max-width: 980px;
position: relative;
}
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 30%;
left: 60%;
position: absolute;
right: 12%;
top: 37%;
}
I am relatively new to front-end dev so a bit lost as to how i can go about this. I created a container that contains a slider and some images. My supervisor has a huge screen so obviously there will be empty space at the bottom of the screen. So he doesn't want that. Instead he wants the container to be centered horizontally and vertically based on the size of the user's screen.
How can I do this properly with as minimal code as possible? I believe there is jQuery plugin but wanted to see if there is a better way or if doing this makes sense at all or not?
Due to the flow-based nature of CSS, without Javascript this can only be done if the vertical size of the centered element is fixed, by applying a position:absolute' andtop:50%` within a fixed container, and then use negative margin to offset the container. Click here for JSFiddle Sample.
Alternatively the same effect can be reached by using display:table-cell, but that's kind of messy and loses you a lot of flexibility. Sample already supplied in the other answer here so I'll save myself the effort :)
You can do it easily using a vertical-align property.
Since vertical-align works the desired way way only in a table cell, this trick with display property can give you the desired effect.
#yourDiv {
// give it a size
width: 100px;
height: 100px;
margin: 0 auto;
}
html, body {
height: 100%;
width: 100%;
padding: 0; margin: 0;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
}
See a fiddle with demo.
Try this:
HTML:
<div class="center"></div>
CSS:
.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
background-color: red;
}
Demo: http://jsfiddle.net/WDth4/
Exactly Center an Image/Div Horizontally and Vertically:
http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/