How to fix width of td?

Question

I have this table:

<table style="background: green">
    <tr>
        <td style="width: 100px; height: 50px;">
            <div style="width: 100%; height: 100%; overflow: hidden; overflow-x: hidden;">
                <img src="mylogo.png" width="177" height="71">
            </div>
        </td>
    </tr>
</table>

As you can see I have an image inside that table cell, which is scaled to 177 x 71 pixels.

In my cell td I sepecify a width of 100px and a height of 50 px.

Inside the div, which is a child of the td, I set overflow to hidden.

It works fine with the height, the image is not shown completly (as it should in this example). But it does not work with the width.

What do you **want** to happen? the image to retain its size but be clipped? — vsync, Dec 01 '21 at 15:31
See [this answer](https://stackoverflow.com/questions/11757537/css-image-size-how-to-fill-but-not-stretch) — vsync, Dec 01 '21 at 15:36
Read [this article](https://css-tricks.com/on-object-fit-and-object-position/) — vsync, Dec 01 '21 at 15:36
Maybe set the width of the div to "inherit" instead of "100%". — Alohci, Dec 01 '21 at 15:51

score 0 · Answer 1 · edited Dec 01 '21 at 15:35

CSS-wise you will want to have a look at setting both the width and the height to 100% of the parent container, or a fixed pixel value. And then making use of the object-fit (https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) property.

object-fit: cover will cause the image to be stretched until it fills the box.

object-fit: contain will scale the image up until either width or height has reached the max.

I'd suggest to try them both and have a look at which of the two you will most likely want.

How to fix width of td?

1 Answers1