0

I have an image stored in a database that I'm trying to stretch to width and height of div, I can get the width to 100% but can't get the height to do the same.

I'd like to use background cover but that wont work as I'm not getting my image via background: url() in css

The code has been tried with different variations but currently is:

<div id="postimave">
    <img src="data:image/jpeg;base64,<?php echo base64_encode($thumb) ?>" />
</div>

CSS:

img {
    width:100%;
    height:100%;
    background-size:cover;
}
luiges90
  • 4,493
  • 2
  • 28
  • 43
Mark Berry
  • 91
  • 9

2 Answers2

0

Stretch the image to the height and width in pixels (px) of the div might not be the best easy bit should work

Ry_dog101
  • 25
  • 1
  • 6
  • The div the image is in is a percentage of screen size, so the number of pixels is not known. If it comes to it I suppose I can state the pixel height rather than use a percentage but I'd like to find a way to work with the percentage. – Mark Berry Jun 08 '13 at 12:31
0

background-size: cover; can only be applied to a background-image definition in CSS. You're saying that you can't use it that way. Is there are specific reason? In general it does work this way:

<div id="postimave" style="background-image: url(data:image/jpeg;base64,<?php echo base64_encode($thumb); ?>)">
</div>

CSS:

#postimave{
    background-size:cover;
    /* Add your desired width and height */
}

Using the img-element you can set the width: 100%; which will fill the space horizontally. Other options would be to resize/crop the image via PHP or using JavaScript for recreating the cover-effect.

Max
  • 1,505
  • 14
  • 19