Search the Community
Showing results for tags 'crop'.
Found 3 results
-
I've got this responsive image gallery, made with W3.CSS <div id="portraits" class="w3-row tab"> <div class="w3-half"> <img src="img/img1.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> <img src="img/img2.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> </div> <div class="w3-half> <img src="img/img3.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> <img src="img/img4.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> </div> </div> <--! more stuff here -->... These images are all in different aspect ratios. So at the bottom of the image gallery, the images don't match up; 1 half is longer than the other. I've looked for answers. Putting the image in the div etc... doesn't work... I'm new here, and also relatively new to css3, so if you need more information to help me out, feel free to ask. Thanks in advance! (attached document is the HTML file. I'm using w3-third instead of w3-half, doesn't matter though) portfolio.html
-
I am using resized images as thumbnail links. I want the thumbnails to be 100px by 100px but I want the images to be resized so that their smaller dimension becomes the 100px edge and the other dimension gets cropped evenly from either end. For example, if the "src" image is 600px wide by 800px high, I want the thumbnail image to crop to 100px wide and 100px high in such a way that the original image would show up as though 100px had been removed from both top and bottom and then the whole thing was reduced in size by 600%. Here's an example of what I have so far for each image: <img src="img/image01" alt="Image Title" height="100px" width="100px"> This is allowing me to efficiently scale the images to 100px by 100px, but they're being distorted by being forced into a square shape when most of them are rectangular. Is there an easy solution I can paste into each <img> tag? I would also be open to using CSS.
-
Dear forum, i copied a gallery and adjusted it.the problem is that i can't adjust the image size.right now the image size is like the files original size 1024x768px or 768x1024px. i changed the width to 600px and as you can see it just cuts of some part of the image.what could be the solution?http://quop.eu/quop/...ublic/quop.html here is the HTML code: <html><body><link rel="stylesheet" type="text/css" href="http://quop.eu/quop/wp-content/public/quop.css"><script type="text/javascript"></script><table align="left" style="border-spacing: 0px;width:100%;"><tbody><tr><td><table class="kl_body"><tbody><td class="kl_m"><div class="kl_box"></div><div class="kl_vorschau kl_height_1"> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_1.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_1.jpg"><div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_1.jpg);background-repeat:no-repeat;"></div></a><a href="http://quop.eu/quop/wp-content/uploads/images/22222986_2.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_2.jpg"><div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_2.jpg);background-repeat:no-repeat;"></div></a><a href="http://quop.eu/quop/wp-content/uploads/images/22222986_3.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_3.jpg"><div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_3.jpg);background-repeat:no-repeat;"></div></a><a href="http://quop.eu/quop/wp-content/uploads/images/22222986_4.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_4.jpg"><div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_4.jpg);background-repeat:no-repeat;"></div></a><a href="http://quop.eu/quop/wp-content/uploads/images/22222986_5.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_5.jpg"><div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_5.jpg);background-repeat:no-repeat;"></div></a><a href="http://quop.eu/quop/wp-content/uploads/images/22222986_6.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_6.jpg"><div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_6.jpg);background-repeat:no-repeat;"></div></a><img src="http://quop.eu/quop/wp-content/public/quop_logo.png"> </td></tr></tbody></table></body></html> here is the CSS code: @charset "UTF-8";* {margin:0px; padding:0px; font-family:'Arial'; text-align:left; border-collapse: collapse;}a {text-decoration:none; border:none;}img {border:none;}.kl_info {vertical-align:top;}.kl_m {width:1px; vertical-align:top;}.kl_vorschau {padding:3px;}.kl_vorschau img {border:1px solid black; width:700px; height:700px;}.kl_vorschau a img {width:100px; height:100px;}.kl_vorschau a .kl_foto {display:none; position:absolute; left:3px; width:600px; height:1024px; border:0px solid black; margin:0px; padding:0px;}.kl_vorschau a:hover .kl_foto {display:block;} sincerely,raitis
