div风格高度不起作用

Question

I need to style the size of a div directly in the html but I have a problem. The div container size only works if I style the height inside a CSS class, otherwise the container won't have any height (even styling it in the div tag instead, what I'm trying to do).

The width and height are taken from the image, and I don't know any other way to do this;

list($width, $height) = getimagesize('dir/to/img.jpg');
echo $width . $height; //WORKING

// resizing the img...
// the resizing script have max width and height
$img_width = 'width="' . $width . '"';
$img_height = 'height="' . $height . '"';

<div class="img_container" ' . $img_width . ' ' . $img_height . '>
    <img src="'. $img_dir . '" class="img"/>
</div>

// the html output is ok but maybe it's not overwriting the css

This is the css class I'm using for the container:

.img_container {
    overflow: hidden;
    position: relative;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
    display: block;
    width: auto;
    min-height: 50px;
    max-height: auto;
}
.img {
    height: auto;
    display: block;
}

If I remove the height from .img_container, the div won't have any height (and the image is not shown, but the div has the width and height).

So what I want is the div to have the same width and height as the image does.

Answer 1

Inline styles should overwrite (have higher priority than) external CSS, but you haven't set the width and height properly. You should use the style attribute like this;

<div class="img_container" style="width: <?php echo $width; ?>px; height: <?php echo $height; ?>px;">

You also needed to re-enter PHP parsing to use PHP variables (with the <?php ?> tags as above).

Additionally, you have an error in your CSS as you haven't put a semicolon (;) at the end of your img rules.