I am trying to fit an image into a div (display: table cell). The width never exceeds the width of the div but the height always does. Although I think in IE 11 it's working fine because the overall size of the table is exactly correct. But in Chrome the computed height is 9.297px; in Firefox the computed height is 10.5px. The specified width and cell of the div
in CSS is 9 pixels by 9 pixels. As you can see from the code below it is a table construction but in divs. I've played around with it for ages with
the help of loads of posts on SO but I can't quite it to work perfectly. To be clear, height, cannot exceed 9 pixels.
I just wondered if anybody had any ideas to get it to work. As I say i think it's working in IE, just not the others.
I've included this JSFiddle - https://jsfiddle.net/eermepfe/ . It isn't an exact replica of my table. I have so many cells it would look ridiculous in a jsfiddle. Moreover the height stretch in the fiddle is even worse than my own broswer results; still it catches the problem.
Thanks for your help
<div id = "table">
<div class = "row">
<div class = "inner">
<img src = "image.png">
</div>
</div>
</div>
There are many rows and many divs in the rows but they follow the above set up.
CSS
#table{
display: table;
table-layout: fixed;
height: 700px;
width: 1200px;
}
.row{
display:table-row;
}
.inner{
text-align: center;
line-height: 9px;
display: table-cell;
background-color: red;
height: 9px !important;
width: 9px;
border-top: 1px solid black;
border-right: 1px solid black;
}
img{
height: auto;
max-width: 9px;
vertical-align: middle;
display: block;
}
Add this style to .inner element
.inner{
box-sizing:border-box;
display:flex;
align-items:flex-start;
}
Edited, Try these styles:
.table{
width:100%;
}
.row{
display:flex;
}
.inner{
box-sizing:border-box;
}
Related
I'm having some trouble with the CSS for my page which displays social media style posts including images. When displaying the images they are placed inside of a div tag which is styled to try and reduce the size of the images and display the images horziontally next to eachother.
However, I am having the issue that the images still try to stack on top of each other and I can not get them to resize how I would like, especially on mobile. Currently based on some other thread here this is what I've got
.postImg{
display: inline-block;
height:100%;
width:100%;
object-fit: scale-down;
}
.postImgDiv{
height: 100px;
}
Your image taking 100% of the row width. Change it to: width: auto.
Look at this (your case):
.postImg{
display: inline-block;
height:100%;
width:100%;
object-fit: scale-down;
border: 1px solid;
}
.postImgDiv{
height: 100px;
}
<div class="postImgDiv">
<div class="postImg">A</div>
<div class="postImg">B</div>
<div>
After fix:
.postImg{
display: inline-block;
height:100%;
width:auto;
object-fit: scale-down;
border: 1px solid;
}
.postImgDiv{
height: 100px;
text-align: center;
}
<div class="postImgDiv">
<div class="postImg">A</div>
<div class="postImg">B</div>
<div>
I looked over thousands of questions all of them they want to fit picture in a parent div. I can fit picture in a parent div but when I resize the picture to smaller size the div gets smaller as well. I tried max-width: 80% but the div gets smaller also. I don't want the div box to resize because there are other buttons and lists in the page that move with it. And I cant use background-image trick as well. The only solution is to set for example height: 150px for box div but that also gives me problem for smaller screen sizes. Can anybody be any help? This question probably will be flagged duplicated but I gave up on searching.
.box {
width: 100%;
float: left;
}
.picture {
border: none;
outline: none;
max-width: 100%;
vertical-align: middle;
}
<div class="box">
<img class="picture" src="https://www.w3schools.com/w3css/img_lights.jpg" />
</div>
I'm honestly not completly sure what your asking about but solving the size of a picture inside a div with paddings and margins is not what we want to do. there you have to use media-queries to get responsiveness.
try transform: scale(0.5)
scale let you resize your content dependent on how big your content was initially.
.box {
width: 100%;
float: left;
}
.picture {
border: none;
outline: none;
max-width: 100%;
vertical-align: middle;
transform: scale(0.5);
}
<div class="box">
<img class="picture" src="https://www.w3schools.com/w3css/img_lights.jpg" />
</div>
Your box element should have a height too. Also, set a position relative to it and a position absolute to the image. The child element should always be placed inside the parent with an absolute position. This way you can individually set sizes and positions.
You can use viewport height for div (vh) as per your need.
.box {
width: 100%;
height:100vh;
float: left;
border:2px green solid;
margin-bottom:10px;
}
.picture {
border: none;
outline: none;
max-width: 80%;
vertical-align: middle;
}
See the example: https://jsfiddle.net/srijan1709/fvezsnjb/10/
Edit-
You can use object-fit for adjusting the image inside div also. Set value of object-fit to scale-down or contain as per your need.
See the example: https://jsfiddle.net/srijan1709/fvezsnjb/27
Try making the div absolute and the image relative to it. I have added a border to the div to see if the image is moving by itself as a test:
.box {
position: absolute;
border: 5px dotted blue; // For testing (remove after done testing)
width: 100%;
float: left;
}
.picture {
position: relative;
padding: 100px 50px 50px 100px; // Moves the image within the div tag
outline: none;
max-width: 100%;
vertical-align: middle;
}
Expected Output:
EDIT: Adjust the padding and width values according to your code expectations.
Please See JSFiddle
When I put width with % I lose 1px in some value.
Here's a fiddle
HTML:
<div class="div_centent " >
<div class="ligne_inscription" >
<div class="label_inscription">Email :</div>
</div>
</div>
CSS:
.div_centent {
width: 49%; /***** here the problem *****/
border: 1px solid #8096c4;
}
.ligne_inscription {
display: table;
width: 100%;
background-color: black;
}
.label_inscription {
display: table-cell;
}
With width: 49%; or width: 52%; I lose 1px, with width: 49%; and width: 50%; or a numerique vaue like width: 100px; it's okay.
Can somebody explain why?
P.S I want a explanation not to change the display from table to block because the problem is in the div with display: table not in the div where i put width: 49%; because with display: block it's okey
I think this is a rounding problem/bug with the display:table implementation.
I just looked it up on chrome and while defining width, it doesn't round down the number but when reading it for the child element it does round it down.
You'll see that the parent is 241.5625 pixels
While the child is 241px.
Don't know if having the border on the wrapper div is crucial but moving the border to the table one should solve the problem.
Some browsers will not do 50% + 50% = 100% width.
I believe it is because decimal values for pixels are rounded.
Very silly example, but for a 3px box, the browser may determine that the two halves should be 2px each so the total would be 4px.
dellchange
CSS
.ligne_inscription {
display: run-in; /**add**/
width: 100%;
background-color: black;
}
I have seen this thread which answers how to center two columns given that you know the total width of both columns in pixels. What if I don't know that or don't want to hard code that? If I at any point want to change the width of the columns I need also to recalculate the with of the wrapper manually. It goes against the DRY principle and reduces maintainability.
So this is the example code. How do I modify it to get the two columns centered on an arbitrary-sized screen without specifying the total container width in pixels? (This code doesn't center at all)
<html>
<style>
.column {
width: 100px;
float: left;
border: 1px green solid;
margin: 10px;
}
.container: {
margin:auto;
}
</style>
</html>
<body>
<div class="container">
<div class="column">qwerty</div>
<div class="column">asdf</div>
</div>
</body>
display:inline-block your columns, and then you can set text-align:center; on your container
.column {
width: 100px;
border: 1px green solid;
margin: 10px;
display: inline-block;
text-align: left;
}
.container {
margin:auto;
text-align: center;
}
Fiddle: http://jsfiddle.net/dPZ7L/2/
I don't agree with the premise of the question most of the time you need to know the width of whatever you are doing as you need to deal with responsiveness - otherwise your wrapper will always 100%. It's more maintainable to set a width on the wrapper once and then use percentages everywhere else. This means you can center you wrapper and then not worry about working out what the widths of your columns are e.g.
.wrapper{
width: 300px;
margin: 0 auto;
}
.col1{
width: 50%;
float: left;
}
.col2{
width: 33.33%
float: left;
}
This is only an example. My favourite grid system uses this idea: https://github.com/stubbornella/oocss/wiki/grids
I have a page with a dynamic number of boxes that I would like to distribute over several columns and lines.
I have the following wishes:
Content of the boxes is different in height, but I want all div's in one 'line' to have the same height for visual appearance. They have a border and background color.
I'dd like to justify columns over the page width
Ideally I'dd like the page to be responsive, so the number of columns should adjust to the browser width. But after reading and watching a lot of examples I don't see how this is possible in combination with the justifying, as that always needs a row div.
So I'm going for a fixed number of columns. With all kinds of examples I came to this solution, but there is still one challenge: getting each div to have the same height:
http://jsfiddle.net/johannesklapwijk/BQJ6A/
HTML:
<div class='row'>
<div class='cell'>a<br/>b</div>
<div class='cell'>a<br/>b<br/>c</div>
<div class='cell'>a<br/>b</div>
<span class='stretch'/>
</div>
CSS:
.row {
text-align: justify;
border: 1px solid red;
padding: 0;
}
.cell {
display: inline-block;
width:30%;
height: 100%; /* does not get the height of the parent div */
border: 1px solid black;
background-color: green;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
I have two questions I guess:
The first question (might make the other absolete), is there a better solution, for example with jQuery to really make a dynamic grid of div's that distrubute nicely based on browser width?
If not: can the height problem be fixed?
Thanks!
So like this? (Change the con width to 100% if you want it the size of the browser)
HTML:
<div class="con">
<div class="col">asd</div>
<div class="col">asdasdasd
<br />asdas
<br />asdasd
<br />asdasd
<br />asdasd</div>
<div class="col">asd</div>
</div>
CSS
.con {
height: 100%;
width: 400px;
display: table;
table-layout: fixed;
}
.col {
display: table-cell;
border: #000000 solid 1px;
}
DEMO HERE
And for if you want it the size of the browser change width on .con
width: 100%;
DEMO HERE
and if you want the spacing like you have on yours add border-spacing to .con
border-spacing: 10px;
DEMO HERE
I've been trying to find something that meets my needs and I'm afraid CSS only is not enough.
I guess the jQuery freewall plug-in might give me what I need, even though it might be a bit heavy for my wishes.
http://vnjs.net/www/project/freewall/