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
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 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 have tried multiple options and narrowed it down to a specific class but I cannot seem to figure it out.
Im trying to get "#content-wrapper" to increase height but it seems to be stuck at the browsers height.
This has been pissing me off for the past 3 hours.
#content-wrapper {
width: 100%;
max-width: 1000px;
height: 100%;
min-height: 100%;
margin: auto;
position: relative;
}
JSFiddle Link: http://jsfiddle.net/8hn7uLqr/
If anyone can help me please I will be very grateful, I hope everyone is having a good Christmas Eve!
Delete height:100% in the css for the #wrapper and #content-wrapper. It this case it means the height of your browser without scrolling. Give the height a number of pixels or let the height depend on the content within with height:auto.
So if I understand you correctly, you're not sure why your content shows a height of 703px when it's actually in the 9000's. There are 2 issues here.
is the use of height: 100%. Many people think that means 100% of the content but it's actually 100% of the current screen size unless you set html to be height: 100% as well. You can use min-height: 100% which will allow it to extend past the screen height.
The biggest issue you are having is because of the constant use of position: absolute. I'm not sure if you are aware but using absolute positioning removes the element from the flow of the document. Meaning it no longer adheres to it's parents constrains.
After I removed the multiple position: absolute and the height: 100% you can see form the following screenshot the height is adjusted to the content:
So really you need alot of CSS overhaul to set this up without absolute: position
I have a div placed on the bottom-left corner of the browser window by using position: fixed. When the user resizes the window, I want the div to resize as well, but preserve the original aspect ratio.
CSS solutions only (or a confirmation that it cannot be done solely using CSS). I'm working in IE9+. I will accept any solution: div resizing by its width OR height.
There were many questions (with solutions) like mine, however none of them seem to provide a solution for when the div is using position: fixed. Their solutions must have position: absolute, or they don't work.
EDIT 1: Codepen live example here.
EDIT 2: This is how I want it to work, whilst still using position: fixed.
It's not entirely clear to me if you know the aspect ratio in advance -- if so, you can just use a variation of
#content:before {
content:'';
float:left;display:block;
width:0;
padding-top:80%; /*height= 80% of width */
}
possibly combined with a min-height for #container? (This is a streamlined variant of the accepted answer in your link.)
Assuming you are looking for something where you will have a small div at the bottom right corner of your window and resizing the browser window will resize the small box.
HTML:
<div class="fixed-box">
Something...
</div>
CSS:
.fixed-box {
position: fixed;
bottom: 0;
left: 0;
width: 10%;
height: 10%;
background-color: #ccc;
}
i'm currently trying to make an image resize depending on the browser dimensions. I've managed to get the image to resize horizontally, if I make the browser window narrow the image will resize proportionally just fine. However when I resize the window vertically, Firefox just doesn't seem to want to do it! The code is pretty simple
<body>
<div id="content">
<img src="images/abc.jpg">
</div>
</body>
and the CSS:
#content {
height: 100%;
padding: 50px;
}
#content img{
max-height:100%;
max-width: 100%;
}
Another issue is that the image does seem to resize vertically in chrome, but i have to drag the bottom of the browser well over the image before it start doing this. I'd rather the image start to rezise as soon as the bottom content padding "hits" the bottom of the image so to speak. Hope this is making sense.
Any help much appreciated
try this, taken from Twitter bootstrap 2
html,body{height:100%;}
#content {padding: 5%;}
#content img {
max-height: 100%;/* Part 1: Set a maxium relative to the parent */
width: auto\9;
/* IE7-8 need help adjusting responsive images */
max-width: auto;
/* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Because height could potentially go on forever, you cant set the height of anything relative to the browser window to be a function of percent. What i'm saying is that you will need to put it inside of something with a fixed height to use a per-cent value. Good Luck!
-b
You've only specified the "max-height" and "max-width" properties.
If you don't specify the actual "width" or "height" properties, the image initialy takes the width and height of its physical dimensions (if not larger than the specified max-height and max-width).
Said that, the behaviour you've noticed, is correct.
The answer is, as already mentioned, to specify also a initial width or height property, dependig wether your image is portrait or landscape.
Is that what you want?
I actually just added a height to html and body, so that #contents height doesn't get to high.
body, html {
height: 100%;
margin: 0;
padding: 0;
}
(And box-sizing: border-box to #content, because it seems like you'd want that)