Dealing with multiple images of differing height/width - html

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

Related

How to get 100% height of page content when using a MDL fixed header in Chrome?

I'm trying to make a page with a fixed header using material design lite. The problem is that I can't get the entire space of the page-content div.
Suppose I wanted to paint red the whole page except for the navigation bar. This works on Firefox:
<div class="page-content" style="height:100%">
<div style="background:#ff0000;height:100%"></div>
</div>
codepen : http://codepen.io/anon/pen/qONpXQ
This exact same codepen doesn't work in Chrome. How can I get the whole space in Chrome? I don't really care if the solution breaks the page in Firefox.
I created a different solution. The problem with using vh to set a content container's height is that if the content becomes a lot it will overflow the background color since the div is now a fixed height.
In this code pen I have created a "background-color" using a pseudo element which allows the content to scroll as usual but have the background still.
http://codepen.io/mcclaskiem/pen/YyWYoP
.page-content{
background-color:red;
height: 100%;
width: 100%;
&:after {
content: "";
height: 100vh;
width: 100%;
background-color: red;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
}
For some reason "page-content" on chrome doesn't work with percentages, no matter what I do. My advice to you would be to either use the parent div for your content, or to define the height of "page-content" in ems or pixels.
I personally have a similar issue right now and I honestly can't get it solved
Edit: mcclaskiem solution works better try out this codepen

CSS Class will not gain height

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

div aspect ratio resizing with position:fixed

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;
}

Google Swiffy, and responsive design, height

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

Scale a table to fit browser window, but keep proportions

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?