I want to fill the img into the td (red border), I do not care if it gets stretched. The table has the black border.The tr has no border.
(https://i.stack.imgur.com/VKleK.jpg)
I have tried using
width: 100%;
height: 100%;
but to no avail.
By using width: 100%; we are starching that image and by writing display: block we are displaying that image.
For better understanding, you can check this example.
.fillbg {
background-color: red;
}
img {
width: 100%;
display: block;
}
<table>
<tr>
<td class='fillbg'>
<img src="//via.placeholder.com/350x150" class="lazyloaded" data-ll-status="loaded">
</td>
<td class='fillbg'>
Test
</td>
<td class='fillbg'>
Test3
</td>
</tr>
</table>
Related
I'm trying to get the text to display over each individual image, I can't figure out why it's not displaying at all. From what I can tell I don't have the text hidden or anything, it's just not displaying on top of the corrisponding images.
I'm very new to html/css so i'm proberly missing someting quite obvious.
<html>
<body>
<table class="index">
<tr>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Care-Guide.jpg">
Care guides
</td>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Prop.jpg">
Propagation
</td>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Trouble.jpg">
Troubleshooting
</td>
</tr>
<tr>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Easy.jpg">
Easy plants
</td>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Pilea.jpg">
Pilea
</td>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Pets.jpg">
Pets & plants
</td>
</tr>
</table>
</body>
</html>
table.index{
table-layout: fixed;
border-spacing: 25px 35px;
font-size: 20px;
color: #575151;
padding-left: 180px;
padding-right: 180px;
}
table.index td {
height: 220px;
width: 360px;
min-width: 200px;
position: relative;
border: 1px solid black;
background-color: #575151;
vertical-align: middle;
text-align: center;
}
table.index td img {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
div.index {
width: 100%;
}
You should put your text in an HTML element for example p tag: <p>Easy plants</p>
Give the p element a relative position: position: relative;
This will position it over the absolutely positioned image.
If you happen to change the order of the images and the text elements later, you should give the text elements a higher z-index value than the images.
I have a table with several columns. On chrome, the height of the table-cell (td) with an image inside varies when image height is in decimals (e.g. 76.54px) On firefox and IE this works fine and all tds have same height.
Please see the following fiddle:
https://jsfiddle.net/sstzg0rh/3/
Height of the column with image is few point less pixels then the other columns. This works fine on firefox and all tds have same height. Why chrome is showing different behavior with column height and how to fix this
<div class="container-row">
<div class="container">
<table>
<thead>
<tr>
<th>Title</th>
<th>Image</th>
<th>Text</th>
</tr>
</thead>
<tbody>
<tr>
<td>
ABCDEFG
</td>
<td>
<img src="http://via.placeholder.com/74x90" alt="This is a no image">
</td>
<td>
ABCDEFG
</td>
</tr>
<tr>
<td>
ABCDEFG
</td>
<td>
<img src="http://via.placeholder.com/74x90" alt="This is a no image">
</td>
<td>
ABCDEFG
</td>
</tr>
</tbody>
</table>
</div>
body {
line-height: 1.5;
}
img {
max-width: 72px;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
tr {
min-height: 80px;
width: 100%;
border-bottom: 1px solid red;
}
td {
white-space: nowrap;
vertical-align: top;
}
I thought your img elements was a inline elements that led to the problem.
The solution i thought was
img{
display:block;
}
What I want is the image to be the same height of the td when the image isn't there, i.e. 300px, not the height of the image src. I can't specifiy the height of the image, td or table since the parent div represents the height of a responsive container. I've spent far too long on this and tried many things and for some reason the image always insists on being its full height.
<div style='height:300px;width:300px;'>
<table style='height:100%;width:100%;'>
<tr>
<td>
<img style='height:100%;width:100%;' src='https://placehold.it/1920x1200'>
</td>
</tr>
</table>
</div>
Try using CSS instead of inline styles. This helps keep your code more flexible. I've set the height and width to be auto and the max-height and max-width to be at 100% so that the image is contained inside the table cell, but also correctly scaled.
.table-container {
height: 300px;
width: 300px;
padding: 5px;
border: 1px solid red;
}
table td {
border: 1px solid blue;
padding: 0;
}
table td img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
<div class='table-container'>
<table>
<tr>
<td>
<img src='https://placehold.it/1920x1200' />
</td>
</tr>
</table>
</div>
Try This, added "overflow: hidden;position: relative;" to parent and "position: absolute;" to child
<div style='height:300px;width:300px;'>
<table style='height:100%;width:100%; overflow: hidden;position: relative;'>
<tr>
<td style='position: absolute;'>
<img style='height:100%;width:100%;' src='https://placehold.it/1920x1200'>
</td>
</tr>
</table>
</div>
output screen
I can't figure out why this text won't align with the bottom of the image:
Here is the example snippet:
img {
height: 80px;
width: auto
}
.spacer {
width: 30px;
}
h1 {
vertical-align: bottom;
}
<table>
<tr>
<td><img src="https://unsplash.it/80" /></td>
<td class="spacer"></td>
<td>
<h1><b>KCFishFans.com</b></h1>
</td>
</tr>
</table>
h1 has margins by default. You can remove these in your CSS.
table h1 {
margin: 0;
}
<table>
<tr>
<td><img src="https://unsplash.it/80" style="height:80px; width:auto" /></td>
<td style="width:30px"></td>
<td style="vertical-align:bottom">
<h1><b>KCFishFans.com</b></h1>
</td>
</tr>
</table>
Here is my alternative solution for the layout and the space between the elements:
I would solve it with flexbox and a wrapper. For the space between the img and h1 I would use padding-left in case of an empty td with a width. The advantage of this solution is, it is 100% aligned to the bottom of the img. With tables it isn't aligned 100% with the bottom of the image (I think because of the default line-height for the h1).
Here you have a complete guide for flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Hope this helps.
.wrapper {
display: flex;
align-items: baseline;
}
.wrapper__image {
height: 80px;
width: auto
}
.wrapper__title {
padding-left: 30px;
}
<div class="wrapper">
<img class="wrapper__image" src="https://unsplash.it/80">
<h1 class="wrapper__title">KCFishFans.com</h1>
</div>
I am trying to replace images in a single horizontal row - as cells in a table row.
That layout works with any other elements but not with <img> for some reason.
Check this:
div { display: table; border: 1px solid red; }
div > img { display: table-cell; }
<p>These shall be replaced in single row but they are not:</p>
<div>
<img src="http://lorempixel.com/output/city-q-c-78-50-6.jpg" />
<img src="http://lorempixel.com/output/people-q-c-78-50-5.jpg" />
<img src="http://lorempixel.com/output/animals-q-c-78-50-5.jpg" />
</div>
Any idea?
UPDATE: FF follows CSS spec and replaces them in single row. All other browsers are not. Heil Firefox!
EDIT
img is a replaced element, it's measured calculations and box model are different. See this ARTICLE
If you insist on using table and are concerned about spacing look at this fork of #StevenThomas's PenCode
I removed all the divs
.container { display: table; table-layout: auto; width: 100%; }
img { display: inline-table; margin: .33em; width: 30%; height: auto; }
Use margin: .125em if you want 4px; border-spacing.
Change div to inline-block
Change img to inline-block
div {
display: inline-block;
border: 1px solid red;
}
div > img {
display: inline-block;
}
<p>These shall be replaced in single row but they are not:</p>
<div>
<img src="http://lorempixel.com/output/city-q-c-78-50-6.jpg">
<img src="http://lorempixel.com/output/people-q-c-78-50-5.jpg">
<img src="http://lorempixel.com/output/animals-q-c-78-50-5.jpg">
</div>
Instead of a div, you could try using a table. Here's the syntax:
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
The tr tags are rows, the td tags are columns. I'd use this syntax:
<table>
<tr>
<td><img src="http://lorempixel.com/output/city-q-c-78-50-6.jpg"></td>
<td><img src="http://lorempixel.com/output/people-q-c-78-50-5.jpg"></td>
<td><img src="http://lorempixel.com/output/animals-q-c-78-50-5.jpg"></td>
</tr>
</table>
div {
display: inline-flex;
border: 1px solid red;
}
div > img {
height: 250px;
width: 250px;
display: table-cell;
}
Here,I just replaced display:table to display:inline-flex and this worked for me.