CODEWITHSUNDEEP
htmlcss
Frank
Frank

Reputation: 624

resize container to image-size

I have a container and would like to resize the height of this container according to the size of the image inside.

HTML:

<figure class="container">
   <a class = "123">
      <img class="item" src="...">
   </a>
</figure>

CSS:

.container {
    position: relative;
    min-width: 100%;
    margin: 0 -10px 10px
}

.item {
    width: 100%;
    border-radius: 3px
}

Does anybody have an idea how I should go about this?

Upvotes: 2

Views: 378

Answers (3)

Display name
Display name

Reputation: 418

before you call the container you call which image you are going to use within the container, get the width and height of the image , now you know what you are going to use it so you can do inline styleing. 

<?php
$img = "your image url comes here";
list($width, $height) = getimagesize($img);
echo"
<figure class='container' style='width:$width;height:$height'>
   <a class = '123'>
      <img class='item' src='$img'>
   </a>
</figure>
";
?>

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46785

The following might do the trick, use display: inline-block for the figure container and get rid of the extra white space after the image with display: block.

The inline-block will give you a shrink-to-fit height and width around the image (and link in your case).

.container {
  border: 1px dotted blue; /* for demo only */
  display: inline-block;
}
.container img {
  display: block;
}
<figure class="container">
   <a class = "123">
      <img class="item" src="http://placehold.it/200x100">
   </a>
</figure>

Upvotes: 2

user3328557
user3328557

Reputation: 100

<figure class="container">
   <a class = "123">
      <img class="item" src="...">
   </a>
</figure>

.container {
    position: relative;
    min-width: 100%;
    margin: 0 -10px 10px
   height: auto;
   overflow: auto;
}

.item {
    width: 100%;
    border-radius: 3px
}

The container will wrap itself around the image and adjust accordingly.

Upvotes: 0

Related Questions