|Related to : How to create a responsive div with a background image?|
|How to make only background image transparent in responsive square grid?|
Seems to work fine if you use the :after/:before solution (setting the
image as the background)
You just need to make sure you apply the same background properties.
/* For responsive images as background */
|Resize Responsive image without stretch + zoom effect on image link|
I can complete the background-image: cover. Create a html tag with a
id of 'cover' like so...
<!-- content -->
Then, you need to do the following in CSS.
padding: 0, 0, 0, 0;
background: url(http://placehold.it/300x150) top left no-repeat;
I would imagine to do the zoom effect, yo
|Create thumbnail for display OR Load 50% of image and create image preview|
use the following code to create thumb nail images, You can create all
type of image file jpeg, png, gif
$orig_directory = "$desired_dir"; //Full image folder
$thumb_directory = "thumb/"; //Thumbnail folder
/* Opening the thumbnail directory and looping through all the
$dir_handle = @opendir($orig_directory); //Open Full image
if ($dir_handle >
|Responsive image using css|
Use Background-size property.
Background-size:272px 120px; /* for original size /
Background-size:100%; / to fill the width of the parent div/element */
|responsive image with maphilight.js|
Please check this link. Responsive image maps with roll-overs
Please also note that you might need to reduce the opacity of your
image if it's not transparent, for the solution to work properly