I'm making a chessboard using only html and css. The chessboard is inside a table. I'm able to scale the table to fit the browser window and at the same time keep the proportions of a square using css:
table {
position: fixed;
height: 0%;
width: 90%;
padding-bottom: 80%;
}
But whats bothering me is that the table-body (whith rows, columns and header) only change its width, not height. I have tried so many different approaches with positioning, width, height, padding, and i'm not able to figure this one out.
Any suggestions or solutions to this problem?
Related
(Similar questions are already asked at stackoverflow, but this question has more constraints, such as both a specific max-width, max-height, a required specific height and width, and no layout shift.)
Problem:
I want to have a responsive image with the following constraints:
max-width: 100%, so that it doesn't overflow to the right, and that it is responsive when reducing the screen width.
max-height: 200px, so that large images are reduced in rendered dimensions.
height and width html attributes set, so that the browser can precalculate the required image dimensions, so that the layout doesn't shift/move elements beside/below the image, while the image is loading. (To reduce the cumulative layout shift.)
image aspect ratio should stay 1:1
no extra margins should be created around the image
the image should be rendered with a plain html img tag, not with css background-images
the image should not be rendered in a larger dimension than its original dimension
How can I achieve this with CSS?
(If CSS cannot achieve this, then maybe in JavaScript?)
What I tried
I tried several CSS features, such as object-fit and max-width: 100% etc, but I always get at least one of the contraints failing while trying to fix another constraint. For example, object-fit creates margins/paddings for the image when it's reduced in size when the screen size reduces, as if the image border isn't reduced. This is demonstrated in the following code:
https://codepen.io/Devabc/pen/mdVvyKq
/* Should appear to the right of the Wombat */
.beside {
float: left;
background-color: lightgreen;
border: 1px solid;
height: 200px;
width: 100px;
}
/* Should appear below the Wombat */
.below {
background-color: red;
border: 1px solid;
width: 100px;
height: 300px;
clear: both;
}
img {
display: block;
float: left;
max-width: 100%;
max-height: 200px;
border: 1px solid;
/* Without this, aspect ratio is not normal.
But with this, it creates an unwanted margin. */
object-fit: scale-down;
object-position: left;
}
<img
height="533"
width="799"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Vombatus_ursinus_-Maria_Island_National_Park.jpg/800px-Vombatus_ursinus_-Maria_Island_National_Park.jpg"
/>
<div class="beside">This text should be directly to the right of the Wombat, without any margin between the Wombat and this text.</div>
<div class="below">This text should be directly below the Wombat, without any margin between this and the Wombat.
The dimensions of the original Wombat img are:
width: 799px, height: 533px</div>
(The green text should be to the right of the Wombat, without margin. But object-fit causes a padding/margin to appear with the length of the original image.)
It's feels almost as if this isn't possible with CSS, even though these requirements shouldn't be too much to ask nowadays, with responsive design being important.
How can I fix this with HTML/CSS?
I've been struggling with this for years on end, but just today I figured a way to do it when you know the image's aspect ratio, hope it helps:
Start by defining a --img-ratio CSS custom property in the img element corresponding to the image's height / width ratio.
<!-- example of a square image (height / width = 1) -->
<img src="..." style="--img-ratio: 1" />
Knowing that our desired max-height is 200px (or you could go with a generic --max-height), we know 2 variables of the equation:
ratio = height / width
width = height * ratio
Applying this:
img {
--max-height: 200px;
/* Set a baseline width for your element */
width: 100%;
/* And limit it with our function above (pick 100% with min() if this size is bigger than parent's width to prevent overflowing) */
max-width: min(100%, calc(var(--max-height, 200px) * var(--img-ratio, 1)));
}
And there we go! This should work to limit the height without extra margins even in complicated flex layouts.
Let me know if this answer is unclear, hope it helps 🌻
PS: If you can't know the ratio of the image beforehand, than maybe JS is indeed your only option - I'm yet to find an alternative 😟
If CSS cannot achieve this, then maybe in JavaScript?
I wouldn't solve this with JavaScript. I understand you want to use width & height on img elements to mitigate content layout shifts, but in this case since you must have a max-height of 200px on the image, it will cause issues on images with larger natural width. The space you see between the green text & the Wombat is not margin or padding, it is that actual content width which you have defined as 799px.
You can solve this with a bit of preparation on the data you wish to present to the user. Prepare your width as you would expect what your image width would be. width=799 in this case is unrealistic because the image will not respond as far as that because of the max-height:200px limitation - same case with height=533. The whole point of using static measurements such as unit pixels is you are already declaring that this X element will just take Y space.
<img
height="200"
width="300"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Vombatus_ursinus_-Maria_Island_National_Park.jpg/800px-Vombatus_ursinus_-Maria_Island_National_Park.jpg"
/>
If your problem is that your webpage/website is not responsive, so I would suggest you to use Viewport Units like vw for width and vh for height instead of px or % for all your elements including border and font-size because it will help you make your webpage/website responsive.
It should solve your issue but if it doesn't let me know in the comments, I will try my best to help you.
I want a background image to appear at the top part and fully cover the width of a page. As you can see, the image is quite wide and short - https://i.imgur.com/aJb6eBr.jpg. This should be the header image of a page, with the contents of the page appearing below it.
If the browser's width is bigger than the image's original width, the image's width and height should be enlarged proportionally (together with its container - thus pushing downwards the page's contents that appear under the image).
If the browser's width is smaller than the image's original width, the image should retain its original size without shrinking, and be cropped from both sides until a 15% crop is reached from each side (You can see that the image has quite wide green areas on both sides which are safe for cropping).
The tricky part is that once 15% of the crop has been reached from each side, I want the image to start shrinking proportionally to the browser's width, thus the middle 70% of the image will always be seen, and the image will never be cropped more than 15% from each side.
The height of the image (and it's container) should rescale automatically in proportion with the image's width. If the image's height (together with its container) shrinks to be smaller than it's original size, the page's contents are pushed up so the distance between the page's contents and the image is always kept the same.
I'm looking for a clean solution (preferably with CSS only) similar to this:
https://demodern.de/projekte/mediengruppe-rtl
Any ideas guys?
In terms of using CSS it is pretty simple to make everything work as you need. In order to do this you might use the image as it is via and the same image on a parent element's background. But you will have to adjust your CSS to work with this image ONLY. In case if you will try to use another image - you will have to adjust paddings or mediaqueries. Solution that works a kind of ONE time for a specific image, but still, it doesn't use JS at all, which is great. And regarding referencing the image twice - it is not a problem for a browser. It will make only one http request for a single unique media asset so no performance problems from this perspective.
Here is a way how you might do what you want:
.wrapper {
background: url(/images/_m1NuVvd.jpeg) 50% 50% no-repeat;
background-size: cover;
overflow: hidden;
position: relative;
padding-top: 38%;
}
.wrapper img {
transform: translateX(-50%);
left: 50%;
position: relative;
min-width: 100%;
display:none;
}
#media screen and (min-width: 1338px) {
.wrapper {
padding-top: 0;
}
.wrapper img {
display: inline-block;
vertical-align: top;
}
}
<div class="wrapper">
<img src="/images/_m1NuVvd.jpeg" />
</div>
Make sure to use a proper path to your image instead of /images/_m1NuVvd.jpeg.
BTW, in future it will be better to probide links to the images in a way, so those might be reused in jsfiddle. Dropbox doesn't allow to use the image via that link.
Best wishes
I have been sent numerous logos of numerous heights and widths (some very tall, others wide with minimal height) that need displaying in table/grid.
Is there a way of setting them all a certain height/width without causing distortion or the images to be chopped off.
Hopefully looking at a CSS solution but even a piece of software that may help.
As you want CSS solution so this may be helpful as it will make your images of same height and width.
<div id="logo"><img src="image.jpg"></div>
#logo { position: relative; height: 100px; width: 200px; }
#logo img { position: absolute; left: 0; top: 0; }
This way you will be showing same images from top and left portion of your image.
This code is taken from another solution, here is full URL to that solution [How to set an image's width and height without stretching it?
[1]: How to set an image's width and height without stretching it? Hope that works for you
I'm testing out Swiffy, and plugging it into Zurb's Foundation responsive framework. It all works well. I also updated the CSS for the #swiffycontainer container to have a width of width: 100%;.
The content fits nicely into the grid, but the my only issue is that if the size isn't set explicitly, then on a smaller screen, then, I get this issue with the height being way way larger than the content, even with height set at 500px. This also results in the Swiffy container showing contents outside of the stage.
Any ideas as to why? Would it be with the SVG generated from Swiffy? Thanks!
Update: It seems that this is probably related to AS 2/3's stageScale property on the Stage. Would anybody happen to know of a happy medium between "showAll/SHOW_ALL", and "noBorder/NO_BORDER"? Where the stage still resizes but doesn't show a border around it?
I ended up solving this issue with a bit of CSS that ensures that the height is scaled proportionally to the width (what ever width it maybe due to the responsive grid). This keeps the flash/Swiffy container from creating the letterbox bars.
In the SWF: Keep the default (AS2):
Stage.scaleMode = "noScale";
In the CSS, created a wrapper on the Swiffy container:
.swiffy-wrap {
position: relative;
width: 100%;
padding-bottom: 100%;
float: left;
height: 0;
}
On the Swiffy container
#swiffycontainer {
width : 100% !important;
height: 100% !important;
position: absolute;
left: 0;
}
just put in the html result of swiffy conversion width 100% be careful only width not height, height, like this
div id="swiffycontainer" style="width: 100%; height: 500px"
works for me
I've got this problem, I've placed a div within a div, I've positioned the "title" to be height 50, and then "navbar" below it, so I've put height 100% though the thing is, its not staying within the div, its actually straying away from and out of the div and making a scrollbar appear.
I would love "site" to hog the walls and then all the other div fit in that div.
<div id="site">
<div id="title">TitleBar</div>
<div id="navbar">NavBar</div>
<div id="frame">FrameBar</div>
</div>
body{
margin: 0;
}
#site{
position:absolute;
width: 100%;
height: 100%;
*border: 1px solid #333;
}
#title{
border: 1px solid #333;
height: 50;
}
#navbar{
border: 1px solid #c38a8a;
width: 200;
height: 100%;
}
I've found an image that shows something similar.
http://img176.imageshack.us/img176/4637/picture1zb1.png
that's because 100% height actually means "use the same height as the container".
But I didn't quite get all your requirements for this layout, if your navbar is a navigation bar, it should be designed in a way that allows scrollbars to appear when the content is too big.
But I think you're going for the wrong structure to accomplish this, is there any actual reason you want a wrapper div? I've created a fiddle on this, check if this is closer to what you wanted: http://jsfiddle.net/6g6HV/2/
This other one is yours, in case you wanna play with it: http://jsfiddle.net/yq8PS/3/
Edit: Adding the javascript solution to the answer http://jsfiddle.net/6g6HV/9
You can make divisions in HTML appear side by side to each other by adding a float property to the css.
#navbar{
border: 1px solid #c38a8a;
width: 200px;
height: 100%;
float: left;
}
Additionally, always add the 'px' unit after a size. Modern browsers assume you mean px, but older ones might not.
There isn't a good way to prevent the overlapping when you have a sidebar that is a set pixel width. To achieve the liquid width (or fluid width) style, you would have to add negative 200px margin on the left to the #frame (to counter sidebar). Then, add another divsion inside the #frame to do the styling for that portion. This is how I have achieved the look on my web site, and it's also the solution used in the previous default Drupal theme (Garland).
#frame{
margin-left: -200px;
}
IN this context, 100% for the Navbar doesn't mean the remaining height but 100% of the visible heigth of the parent; so if the parent has a height of 400px then Navbar will also have an height of 400px. If you add to this size the height of the title bar, you get a total value greater than the size of the parent; therefore the appearance of the scolling bar.
While there is usually no problem with the width to make it appears to fill the whole length of a screen, it's very difficult in HTML & CSS to do the same with the height as they have not been designed for this sort of thing; especially with an imbricated structure (div inside div).
Some people will use Javascript to get the size of the screen (browser) and compute the size of their objects accordingly but I don't know if you can do the same with a pure HTML/CSS solution; especially if you want to have your solution compatible accross many browsers.
For more info, take a look at http://www.tutwow.com/htmlcss/quick-tip-css-100-height/