How to fix width of td?-CodePudding

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.

CodePudding user response：

Try to put all the style in the css

CodePudding user response：

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.