html - Images being distored if width is smaller than container -
i'm trying of these different size images remain undistorted. images great except ones have smaller width container of 285px. i'm ok images being blurry because know stretching them. want of them keep aspect ratios. ones not working images #2, #3, , #4.
i can't use javascript this. needs pure css.
http://jsfiddle.net/pp74fb7b/9/
.squaregallerywrap { width: 285px; height: 285px; } .squaregallerywrap img { min-width: 100%; min-height: 100%; max-height: 286px; min-width: 286px; display:block; margin:auto; position:relative; -moz-transform:translatex(-50%); -webkit-transform:translatex(-50%); -ms-transform:translatex(-50%); -o-transform:translatex(-50%); transform:translatex(-50%); left:50%; } li { float: left; overflow: hidden; -webkit-transition: 0.4s linear; transition: 0.4s linear; }
have tried using https://github.com/karacas/imgliquid
just include:
<script src="js/imgliquid-min.js"></script>
call function
$(document).ready(function() { $(".imgliquidfill").imgliquid(); });
then add class="imgliquidfill imgliquid" image div container
<div class="squaregallerywrap imgliquidfill imgliquid" > <img src="/path/to/image" /> </div>
Comments
Post a Comment