How to adjust popup to image size? - html

Question

I have a script for a popup which is meant to display a clickable image. My problem is I have to adjust the popup dimensions everytime I change the image. Is there a way the popup can adjust automatically based on the image dimensions?
popup.php
<?php
/** popup code **/
echo "
<div id='pop1' class='simplePopup'>
<div id='main' class='row'>
<div class='adimage' align='center'>
<a href='localhost/test/test_target.php' target='_blank'><img src='images/logo.png'></a>
</div>
</div>
</div>";
?>
CSS code:
body {
font-family: Arial;
font-size:14px;
}
.simplePopup {
display:none;
position:fixed;
border:4px solid #808080;
background:#fff;
z-index:3;
padding:12px;
width:50%;
min-width:70%;
}
.simplePopupClose {
float:right;
cursor:pointer;
margin-left:10px;
margin-bottom:10px;
}
.simplePopupBackground {
display:none;
background:#000;
position:fixed;
height:100%;
width:100%;
top:0;
left:0;
z-index:1;
}

Answer 1

You can adjust the image by width or by height. If you do both you will distort the aspect ratio (assuming you have images of different sizes).
For example, to keep a fixed width, set the width of the image container. You can use any unit you like, e.g.
.adimage {
width: 400px;
}
Then force the image to fit to its container:
.adimage img {
width: 100%;
height: auto;
}
For a consistent height you would use
.adimage {
height: 400px;
}
.adimage {
height: 100%;
width: auto;
}
If you need to target the outer containers you can try giving them fixed dimensions, and then applying 100% width to the inner containers:
.simplePopup {
width: 50%;
}
.adimage {
width: 100%;
}
.adimage img {
width: 100%;
height: auto;
}
If this isn't helpful please add a fiddle to your post and I'll take a closer look.