raitis Posted November 21, 2012 Share Posted November 21, 2012 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 More sharing options...
thescientist Posted November 21, 2012 Share Posted November 21, 2012 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 More sharing options...
raitis Posted November 21, 2012 Author Share Posted November 21, 2012 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 More sharing options...
thescientist Posted November 21, 2012 Share Posted November 21, 2012 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 More sharing options...
raitis Posted November 22, 2012 Author Share Posted November 22, 2012 i am no coder.wordpress already generated different sizes automatically. (attachment)i dont know which lines to change and how... Link to comment Share on other sites More sharing options...
dsonesuk Posted November 23, 2012 Share Posted November 23, 2012 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 More sharing options...
raitis Posted November 23, 2012 Author Share Posted November 23, 2012 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 More sharing options...
dsonesuk Posted November 23, 2012 Share Posted November 23, 2012 As the images are added automatically check width against height, if width > height = landscape, width < height = portrait, the apply appropriate class Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now