javascript - How to force the image to display given height and width without stretching in HTML DIV Tag? -
i need make image fit inside div tag provided height , width , should not stretch. few images landscape , few portrait, need force them fit div or img tag.
<div class="frame" style=""> <img id="photo" src="http://pocketlink.epocketlife.com/imagerepository/images/events/adebab1c-4faf-4d65-a43d-a02978b76340/7adb104b-5140-45d9-a694-56cf5112917d.png"> </div> this 1 of examples found, may implement there.
http://jsbin.com/vikanovaya/edit?html,css,output
you need use css position trickery achieve want 1 of these examples want.
example 1 - single image
in example below, image grow or shrink when image hits edge of container. if resize example horizontally or vertically never crop. (try fullscreen example instance).
requires: css only
body { margin: 0; padding: 0; font-family: "segoe ui light", "helvetica neue lt", "helvetica ultra lt", "roboto", arial, sans-serif; } .gallery { background: rgba(0, 0, 0, 0.9); border-radius: 10px; position: absolute; top: 20px; bottom: 20px; left: 20px; right: 20px; overflow: hidden; z-index: 2; } .gallery .imagewrapper { position: absolute; right: 0; left: 0; top: 0; bottom: 0; } .gallery .imagewrapper img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; max-width: 100%; max-height: 100%; }<div class="gallery isfullscreen"> <div class="imagewrapper"> <img src="http://via.placeholder.com/3500x1500" /> </div> </div>example 2 - thumbnails
in example there 2 images don't conform containers aspect ratio. resized longest edge hits div first , centered. thumbnail containers should same size , images not conform shrink fit.
requires: css only
.galleryarea { background: rgba(0,0,0,0.7); padding: 10px; overflow: hidden; } .galleryarea .imagewrapper { position: relative; width: 100px; height: 100px; float: left; background: #fff; } .galleryarea .imageposition { position: absolute; top:0; bottom: 0; left: 0; right: 0; } .galleryarea .imageposition img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; max-width: 100%; max-height: 100%; }<div id="contentgallery" class="galleryarea"> <div class="imagewrapper"> <div class="imageposition"> <img src="http://placehold.it/300x300" /> </div> </div> <div class="imagewrapper"> <div class="imageposition"> <img src="http://placehold.it/300x300" /> </div> </div> <div class="imagewrapper"> <div class="imageposition"> <img src="http://placehold.it/150x400" /> </div> </div> <div class="imagewrapper"> <div class="imageposition"> <img src="http://placehold.it/300x300" /> </div> </div> <div class="imagewrapper"> <div class="imageposition"> <img src="http://placehold.it/300x100" /> </div> </div> <div class="imagewrapper"> <div class="imageposition"> <img src="http://placehold.it/300x300" /> </div> </div> <div class="imagewrapper"> <div class="imageposition"> <img src="http://placehold.it/300x300" /> </div> </div> <div class="imagewrapper"> <div class="imageposition"> <img src="http://placehold.it/300x300" /> </div> </div> <div class="imagewrapper"> <div class="imageposition"> <img src="http://placehold.it/300x300" /> </div> </div> <div class="imagewrapper"> <div class="imageposition"> <img src="http://placehold.it/300x300" /> </div> </div> </div>example 3 - thumbnails stretch
in example, 2 images not conform containers aspect ratios stretched shortest edge expands fill container , longest edge overflows. makes end result little neater requires javascript things along.
requires: css , javascript (jquery)
$(window).on("load", function() { orientategalleryimages($("#contentgallery").children().children().children("img")); }); function orientategalleryimages(images) { images.each(function() { var thisimage = jquery(this); if(thisimage.height() > thisimage.width()) { thisimage.addclass("portrait"); } else if(thisimage.width() > thisimage.height()) { thisimage.addclass("landscape"); } else { thisimage.addclass("square"); } }); }.galleryarea { background: rgba(0,0,0,0.7); padding: 10px; display: flex; } .galleryarea .imagewrapper { position: relative; width: 10%; padding-top: 10%; overflow: hidden; } .galleryarea .imageposition { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; } .galleryarea .imageposition img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .galleryarea .imageposition img.landscape { max-height: 50%; height: 50%; left: -50%; margin-left: 25%; } .galleryarea .imageposition img.portrait { max-width: 50%; width: 50%; } .galleryarea .imageposition img.square { max-width: 50%; max-height: 50%; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="contentgallery" class="galleryarea"> <div class="imagewrapper"> <div class="imageposition"> <img src="http://placehold.it/300x300" /> </div> </div> <div class="imagewrapper"> <div class="imageposition"> <img src="http://placehold.it/300x300" /> </div> </div> <div class="imagewrapper"> <div class="imageposition"> <img src="http://placehold.it/150x400" /> </div> </div> <div class="imagewrapper"> <div class="imageposition"> <img src="http://placehold.it/300x300" /> </div> </div> <div class="imagewrapper"> <div class="imageposition"> <img src="http://placehold.it/300x100" /> </div> </div> <div class="imagewrapper"> <div class="imageposition"> <img src="http://placehold.it/300x300" /> </div> </div> <div class="imagewrapper"> <div class="imageposition"> <img src="http://placehold.it/300x300" /> </div> </div> <div class="imagewrapper"> <div class="imageposition"> <img src="http://placehold.it/300x300" /> </div> </div> <div class="imagewrapper"> <div class="imageposition"> <img src="http://placehold.it/300x300" /> </div> </div> <div class="imagewrapper"> <div class="imageposition"> <img src="http://placehold.it/300x300" /> </div> </div> </div>
Comments
Post a Comment