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>
Related
This is a simple html page. I set html, body height 100%, but there is a quite long content.
Now I make the browser scale to a small size and scrollbar will show. I open Chrome Dev tool, the computed height of body seems the size of viewport, say 321px.
Normally, a body container of 321px computed height will end at the top of the page, but actually the body seems has the same height of the whole page, 1000px here.
That is my puzzle, why does the computed height not match the actual height?
html,body{
width:100%;
height:100%;
background: #ccc;
}
.content {
width: 20px;
height: 1000px;
background: #666;
}
<html>
<head></head>
<body>
<div class="content"> </div>
</body>
</html>
Here you are having an overflow, so the height of the body and the html are different from 1000px and equal to screen height because of the 100%.
The thing that make you think your body has 1000px is probably the background that cover your whole content but here you are facing a special behavior of the background called background propagation.
You may change the background of the html element and you will see the issue clearly:
html,
body {
height: 100%;
background: #ccc;
margin:0;
}
html {
background: red;
border:5px solid green;
}
.content {
width: 20px;
height: 1000px;
background: #666;
}
<div class="content"> </div>
As you may notice, the body height is not equal to the content height but limited to the screen height and your content is simply overflowing the body element. I also added a border to the html element to show that its height is also limited to screen size and to better highlight the background propagation behavior.
When you set height:100% to an element you basically telling it to take it's parent's height as it's own height.
Example :
* {
text-align: right;
}
#parent {
height: 100px;
background: red;
}
#kid {
height: 100%;
width: 200px;
background: lime;
}
#grandkid {
height: 1000px;
width: 100px;
background: orange;
}
<div id="parent">
<div id="kid">
<div id="grandkid">
</div>
</div>
</div>
If you expect the parent to take it's children's computed height, don't define a height for it.
Example :
#parent {
/* Parent without height takes all of it's children's heights*/
background: red;
}
.kids {
height: 1000px;
width: 40px;
background: lime;
margin-top: 10px;
}
<div id="parent">
<div class="kids"></div>
<div class="kids"></div>
</div>
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'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.
I'm stuck with this problem:
I have a div (#container) which contains two divs. The height of the container should be exact 100%, regardless of the content of this div - not less not more.
Inside this div I want two full-width divs on top of each other:
The (#upper) div's content automatically determines its height.
The (#lower) div's content should be scrollable, but only vertically. Its height is dependent on the height of (#upper): 100% - (#upper)height = (#lower)height
Currently I have the following css ...
body {
margin:0;
padding:0;
}
#container
{
position: relative;
width: 500px;
height: 100%;
max-height: 100%;
background-color: #f00;
}
#upper {
width: 100%;
background-color: #0f0;
}
#lower {
width: 100%;
background-color: #00f;
overflow: auto;
}
... as well as this code:
<div id="container">
<div id="upper"></div>
<div id="lower"></div>
</div>
How can the (#container)'s height be exactly 100% - independent of its content? Now the height becomes larger because of the combined content of (#upper) and (#lower)?
How can (#lower) be scrollable (only up and down, not left to right!)?
Thank you very much for your feedback, I hope we can all learn from this.
You should set your html and body elements to have a height of 100%, so your children divs know what to base the percentage off of. Like so:
html, body {
height:100%;
width:100%;
}
Change your container to this:
#container
{
width: 500px;
height: 100%;
background-color: #f00;
}
As for your scrolling issue, you're almost there. Change the code to the following:
#lower {
width: 100%;
height:100px;
background-color: #00f;
overflow-y: auto;
}
For it to work best, have a fixed height set on your lower div and that'll make it easy for the scrollable action to work best.
EDIT:
I realized I mis-read your question. You'd like to have your lower div fill the remaining height of the window. Here's how to do that in jquery:
var top = $('#upper').height();
var remaining_height = parseInt($(window).height() - top);
$('#lower').height(remaining_height);
I still haven't found a way to do that with only CSS... Sadly.
I think this may help you:
<head>
<title></title>
<style>
.upper{
height:50px;
border: 1px solid groove;
}
.lower{
height:calc(100% - 50px);
border: 1px solid blue;
}
</style>
</head>
<body>
<div style="height:500px; border:1px solid red; position:relative;">
<div class="upper"></div>
<div class="lower"></div>
</div>
</body>
This will take 50px out the lower div
For a pure CSS solution, use display: table-row.
<style>
*{
box-sizing: border-box;
margin:0;padding:0;
}
html, body, #container{
height: 100%;
}
#container{
display: table;
height: 100%;
}
#upper, #lower{
display: table-row;
}
#upper{
height: 100px;
}
</style>
<div id="container">
<div id="upper">bla</div>
<div id="lower">bla</div>
</div>
This solution only works if the height of the content is not more than 100%, see here: https://stackoverflow.com/a/13668087/603569
Here a 100% css alternative:
<div style="height:100%;">
main div
<div style="height:100%;padding-bottom:200px;">
header div
</div>
<div style="position:relative;height:200px;top:-200px;">
footer div
</div>
</div>
Remember that all parent elements, including body and html, must have their height set too.
i would like to create a responsive div(box1) which should fit to its content size automatically and also i have a restriction for that content which should not exceed certain value(width and height) of box1 here i give 600x300.
Here is the code and example
.box1
{
width:auto;
height:auto;
background-color:chocolate;
margin-left:auto;
margin-right:auto;
max-width: 600px;
max-height:300px;
padding:5px;
}
I used max-width :600px; and max-height:300px; so the content inside it won't exceed above box1 according to my belief.
.box1 img
{
max-width: 100%;
max-height: 100%;
}
Here image inside box1 won't exceed box1 width and height.
Now
1) if the image is higher than box1 width and height of 600x300px let say 750x750px in this case image should fit in box1 with 600x300px
2) if the image is lesser than 600x300px let say 200x150px then the box1 should adjust automatically to the image size.
How this can be achieved? what wrong in my code to this concept? can anybody help?
Here is one way of doing it using CSS
Consider the following HTML, I am including four images of various aspect ratios to illustrate that this works. The .wrap element is to show you you might center the image within its parent block.
<div class="wrap">
<div class="box1">
<img src="http://www.placekitten.com/500/500">
</div>
</div>
<div class="wrap">
<div class="box1">
<img src="http://www.placekitten.com/800/200">
</div>
</div>
<div class="wrap">
<div class="box1">
<img src="http://www.placekitten.com/200/800">
</div>
</div>
<div class="wrap">
<div class="box1">
<img src="http://www.placekitten.com/200/200">
</div>
</div>
The trick is to set display: inline-block for .box1, which will force it to shrink to fit the content subject to the max-width and max-height constraints.
.box1 {
width:auto;
height: auto;
max-width: 600px;
max-height: 300px;
background-color:chocolate;
padding:5px;
display: inline-block;
}
To get the image to scale correctly, simply inherit the max-width and max-height values:
.box1 img {
vertical-align: top;
max-width: inherit;
max-height: inherit;
}
Use vertical-align: top to get rid of any white space near the image tag.
Finally, since .box1 is an inline-block, you can center it within its parent container using text-align: center:
.wrap {
border: 1px dotted gray;
margin: 1.00em 0;
text-align: center;
}
The demo fiddle is at: http://jsfiddle.net/audetwebdesign/hpbdC/
img {
width: 100%;
height: auto;
max-height: 100%;
}
should work (I assume you want keep aspect ratio)
By default box1 is treated as a display: block element. If you change that display type to an inline-block (ex: display: inline-block) it would be treated as an adjustable item.
Do keep in mind that you are setting the max height of the box to 300px. Therefore, the image's max-height is three hundred. In the case of a 750px by 750px image, it will be resized to a 300px by 300px image (and so will the box).
Why do you need the wrapping div? You can achieve this by only styling the image: http://jsfiddle.net/Rv7JG/1/
img {
max-width: 600px;
max-height: 300px;
height: auto;
width: 100%;
padding: 5px;
background: chocolate;
}