Jump to content

complicated gallery


raitis

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

Link to comment
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.

Link to comment
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.
Link to comment
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.

Link to comment
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>

Link to comment
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.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...