I'm trying to size an image in a table-cell to be no larger than the height/width of the table-cell, but it's not working.
.wrapper {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,.2);
z-index: 8;
}
.container {
position: fixed;
left: 5%;
top: 5%;
width: 90%;
height: 90%;
}
.table {
display: table;
width: 100%;
height: 100%;
table-layout: fixed;
background: #eee;
}
.table .cell {
display: table-cell;
}
.table .cell.left {
width: 240px;
background: #fff;
}
.table .cell img {
max-width: 100%;
max-height: 100%;
}
As you can see on the screen shot, I have two cells, one on the left which is white and one on the right which contains the image. The table is in the background in #eee, and is the proper height/width (it fits to .container), but the cells overflow the table height when the image is larger than its parent cell, and setting max-height and max-width for the image has no effect - it just sizes to its original size.
HTML
<div class="wrapper">
<div class="container">
<div class="table">
<div class="cell left">
//white
</div>
<div class="cell">
<img src="" /.
</div>
</div>
</div>
you can't set height as a %, any rules set like this will be ignored and the pictures original height will be used.
Those are just two guesses:
Try to add rows with "display: table-row"? You can then apply row height and max-height either by em/px or % each row.
Also try using "overflow: hidden;" or "overflow: none" at your rows and cells.
Well, the best I can do for now is change it to a background image and use background-size: contain;, which is an imperfect solution but more simplistic than using javascript. I can't find another work-around.
Related
I want my img to always be the same size, but to make it look good too. (object-fit?). I want these pictures to be the same size.
Actually my img has width: 100%;, and doesn't have height property css.
Please, check my code in jsfiddle. (comment)
To make your image of same size. keep your image inside a div and give some width and height in that div. Then by adding a css property of width:100% and height:100% your image will always be the same size of the div.
<style>
.img-box{
width:300px;
height:300px;
}
.img-box img{
width:100%
height:100%;}
</style>
<div class="img-box">
<img src="image.jpg">
</div>
https://jsfiddle.net/z09xa8ph/2/
Here is your edited fiddle, one additional wrapper around the img tag was added and you have to set at least some height value to the box, I added it to the .st--player-box class set it to 31vh, to keep it somewhat responsive. Of course this where you can edit it to fit your needs.
.st--image-box{
height: calc(100% - 55px);
width: 100%;
float: left;
}
An issue that can come with this approach is that bigger images could be cut off wrong since when using object-fit: cover, the object-position can't be set to center the image, but the cover atribute keeps the image aspect ratio at the parent box size, so images in all boxes will have the same size not depending on their aspect.
It is a solution that does not stretch the image.
* {
box-sizing: border-box;
}
a {
color: #d9400b;
text-decoration: none;
text-align: center;
}
.st--player-box {
border: 1px solid #dadada;
display: block;
float: left;
width: 31%;
margin: 1% 0 1% 1.7%;
}
.st--player-box .st-player-img {
display: block;
}
.st-player-img {
/* just adjust the height and width */
height: 300px;
width: 100%;
object-fit: scale-down;
background: black;
}
.st--player-info {
height: 55px;
}
<a href="http://strefatenisa2.crehler.com/zawodnicy/rafael-nadal/">
<div class="st--player-box">
<img class="st-player-img" src="https://media.strefatenisa.com.pl/media/image/74/45/ea/rafael-nadal.jpg" title="Rafael Nadal" alt="Rafael Nadal">
<div class="st--player-info">
<span class="st--player-name">Rafael Nadal</span>
</div>
</div>
</a>
<a href="http://strefatenisa2.crehler.com/zawodnicy/roger-federer/">
<div class="st--player-box">
<img class="st-player-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/motorcycle.jpg" title="Roger Federer" alt="Roger Federer">
<div class="st--player-info">
<span class="st--player-name">Roger Federer</span>
</div>
</div>
</a>
In this picture, I have a HTML content "div#container". It may contain a lot of things like images, forms and other HTML tags.
I want to resize this div and put it inside other container(s). The new containers may have different widht/height so I have to resize the div#container. It's a bit like to resize an image - I need to keep the width/height ratio. And I need to place the div#container in the center of the new container.
Is it to do so with pure CSS?
Thanks
Here's how you can do it using height: 100% and width: 100% on div#container and padding on div#dash-container:
.container {
background: lightgray;
position: relative;
height: 100%;
width: 100%;
}
.dash-container-1,
.dash-container-2 {
box-sizing: border-box;
border: dashed 2px;
}
.dash-container-1 {
height: 500px; /*whatever sizes you want*/
width: 300px;
padding: 100px 0;
}
.dash-container-2 {
height: 300px;
width: 500px;
padding: 0 5%; //you can use px, %, em, ...
}
<div class="dash-container-1">
<div class="container"></div>
</div>
<div class="dash-container-2">
<div class="container"></div>
</div>
I have a set of absolutely positioned fluid divs within a container and want to display an image within each div that is vertically and horizontally centred within the container and fills up as much of the available space as possible. Due to using these images for other purposes they have to be img tags and not background images (otherwise with CSS3 this would be easy!)
I would have thought the following code should do just this but for some reason on Firefox the image displays in it's original dimensions and is not constrained by the parent dimensions. In Chrome the width seems to be correctly linked to the container however the img height is not constrained by the container height.
I could understand it if there was no width/height set on the parent but every element in this example has a percentage width/height set so i don't think this is the problem. FYI if you set a specific width:100% on the img then this constrains the width correctly (but can't be done as it means it's loses the correct aspect) however it still doesn't work for height even if you set the height to 100%,
You can see a jsfiddle at http://jsfiddle.net/deshg/xrzk084d/ and the code is below.
If anyone could point me in the right direction as to what i'm doing wrong that would be greatly appreciated!
body, html, #outer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
background-color: #ffcc00;
display: table;
position: absolute;
left: 20%;
top: 30%;
width: 60%;
height: 40%;
}
#containerinner {
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
}
#containerinner img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
<div id="outer">
<div id="container">
<div id="containerinner">
<img src="https://dl.dropboxusercontent.com/s/wypn5e7n5bgeoic/landscape.png?dl=0" alt="">
</div>
</div>
</div>
Cheers,
Dave
The issue here is that set a vertical alignment of middle is impossible without specifying the height of the containing element. In your situation, you want the height to be relative to the viewport which creates additional difficulty.
However, if we use both the vh (viewport height) and vw (viewport width) units defined in CSS3 we can achieve what you're after. I have then assumed that you want your image to be center aligned and with a max width and height of 60% and 40% of the viewport respective. I have reduced the markup to the following (See JSFiddle):
#container {
position: fixed;
top: 30vh;
left: 20vw;
background-color: #ffcc00;
}
#inner {
display: table-cell;
vertical-align: middle;
text-align: center;
height: 40vh;
width: 60vw;
}
img {
display: block;
max-width: 60vw;
max-height: 40vh;
margin: 0 auto;
}
<div id="container">
<div id="inner">
<img src="https://dl.dropboxusercontent.com/s/wypn5e7n5bgeoic/landscape.png?dl=0">
</div>
</div>
I'm trying to create a list of items where each item in the list contains essentially two columns ... the left column some text, and the right column 2 buttons for yes/no. I want the two buttons on the right to be vertically aligned with the text. For aesthetic reasons, I want a min-height on the list item. I finally figured out that a floating div must be inside an absolute div for the 100% height to work. The problem is now that I have an absolute div inside my original relative div, it no longer expands to accommodate text longer than min-height. I've read so many articles and tried so many different combinations of height/relative/absolute/float/clear/overflow and nothing has worked for my situation. Is there a solution to this?
In my example here http://jsfiddle.net/THBFY/4/ I need the red box to be the same height as the blue box so that the vertical align works.
<div class="list_container">
<div class="list_item">
<div class="item_text">
My text in this item. This could be a variable length creating a div ranging from about 75-150px in height. This is a lot of text to make it longer although I am not really saying anything here. It is only to make the blue box taller than the red box.
</div>
<div class="item_buttons">
<div class="buttons_inner">
<div class="button button_yes">Y</div>
<div class="button button_no">N</div>
</div>
</div>
</div>
</div>
.list_container { position: relative; width: 400px; }
.list_item { position: relative; min-height: 70px; overflow: hidden; border: #000000 solid 1px; }
.item_text { float: left; width: 340px; background-color: #0066BB }
.item_buttons { display: table; float: right; width: 50px; height: 100%; background: #FF0000; }
.buttons_inner { display: table-cell; vertical-align: middle; }
.button { display: block; margin-left: auto; margin-right: auto; height: 40px; width: 40px; background-repeat: no-repeat; }
.button_yes { background-image: url("images/yes.gif") }
.button_no { background-image: url("images/no.gif") }
When I add in the inner div with position:absolute http://jsfiddle.net/THBFY/5/ the problem is the height no longer increases to show all of the text.
<div class="list_item_inner">...
.list_item_inner { position: absolute; height: 100%; }
But if I now change the min-height of the outer div from 70 to 200 http://jsfiddle.net/THBFY/6/, you can see that the 100% height on the red box is in fact working, so my problem is either in the first situation without the absolute position, I need the red box to stretch, or in the 2nd situation with the absolute div, I need the container to stretch.
HTML:
<div class="list_container">
<div class="list_item">
<div class="item_text">My text in this item. This could be a variable length creating a div ranging from about 75-150px in height. This is a lot of text to make it longer although I am not really saying anything here. It is only to make the blue box taller than the red box.
</div>
<div class="item_buttons">
<div class="buttons_inner">
<div class="button button_yes">Y</div>
<div class="button button_no">N</div>
</div>
</div>
</div>
</div>
CSS:
.list_container { position: relative; width: 400px; }
.list_item { border: #000000 solid 1px; display:table; }
.item_text { display:table-cell; width: 340px; background-color: #0066BB }
.item_buttons { display:table-cell; width: 50px; background: #FF0000; }
.button { display: block; margin-left: auto; margin-right: auto; height: 40px; width: 40px; background-repeat: no-repeat; }
.button_yes { background-image: url("images/yes.gif"); }
.button_no { background-image: url("images/no.gif"); }
fiddle
I am trying to build a layout that consumes all the space that is visible in browser. I set html, body height 100% as was suggested in different SO posts. Following is the markup that I am trying
<div>
<div class="header">
</div>
<div class="main">
<div class="container">
<div class="content"></div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
max-height: 100%;
}
.header {
height: 30px;
background-color: #000;
}
.main {
height: auto;
padding-right: 0px;
max-height: 100%;
width: 100%;
display: block;
clear: both;
background-color: #eee;
}
.container {
width: 90%;
overflow-y: scroll;
background-color: #ccc;
}
.content {
height: 2000px;
width: 80%;
background-color: #fff;
}
the content div height cause the whole body to grow and hence the browser's default scroll bars are shown. Though I have set the container div to scroll in order to display the content of content div, still the scroll bars for container div don't show. How can I fix this.
here is the jsfiddle
Edited:
By default the height of the div element depends on its content (unlike width which takes 100% width of the parent). That's why when you specify the height of inner element as a percentage it won't be accurate if your parent tag has no explicitly defined height (that means height has to be defined up to the very top of the DOM since height is not inheritable).
In your case you need to add height: 100%; or any other height to your .container , .main and the wrapper div
modified fiddle