Jump to content
raitis

complicated gallery

Recommended Posts

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

Share this post


Link to post
Share on other sites

Change the size of the images themselves. An image tag won't scale an images size if you change the height/width of it, just the img element itself.

Share this post


Link to post
Share on other sites
Change the size of the images themselves. An image tag won't scale an images size if you change the height/width of it, just the img element itself.
no other option?i am trying to resize them in html or css because i dont want to change the images itself.i need them to bee 1024px for some other applications.

Share this post


Link to post
Share on other sites

another option is to set the images as the background image of a div or element. This will cause the image to scale, but you'll have to use the correct height/width ratios. Quality of the rendered image may or may not be affected. or copy the images and make thumbnail sizes and gallery sizes. that is how it is done typically. thumbnails are better so a user doesn't have to donwload every large sized image, just the large sizes of the ones they click on.

Share this post


Link to post
Share on other sites

Depending on if image is landscape, or portrait image apply specific width: 100%;, height: 100%; with max-width: and max-height: to restrict size and keep proportions

.kl_vorschau a .kl_foto { height: auto; width:auto;}.kl_vorschau a .land { width:100%; max-width: 600px;}.kl_vorschau a .port { height: 100%; max-height:1024px;}

<img class="kl_foto land" src="http://quop.eu/quop/wp-content/uploads/images/22222986_1.jpg"></a> <img class="kl_foto port" src="http://quop.eu/quop/wp-content/uploads/images/22222986_5.jpg"></a>

Share this post


Link to post
Share on other sites
Depending on if image is landscape, or portrait image apply specific width: 100%;, height: 100%; with max-width: and max-height: to restrict size and keep proportions
.kl_vorschau a .kl_foto { height: auto; width:auto;}.kl_vorschau a .land { width:100%; max-width: 600px;}.kl_vorschau a .port { height: 100%; max-height:1024px;}

<img class="kl_foto land" src="http://quop.eu/quop/wp-content/uploads/images/22222986_1.jpg"></a> <img class="kl_foto port" src="http://quop.eu/quop/wp-content/uploads/images/22222986_5.jpg"></a>

thanks. but how can i know if my image is going to be portrait or landscape. i am trying to automate this process and i cant check each image.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...