Image Display

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • ziycon
    Contributor
    • Sep 2008
    • 384
    #1

    Image Display

    I upload images of variying sizes for articles but i have a restricted space to show them on, i have 130px wide by 78px high but images can be much bigger is size, how can i display just a section of the image in the 130x78 space without the need to resize and squash the image, for example the below black part is the full image but i only want to display the red box on the article page?
    Tags: None
    • Ciary
      Recognized Expert New Member
      • Apr 2009
      • 247
      #2
      you will probably need to use an image library: GD is the most common, but if you need something more powerful, i should use imagemagick. you better do no use imagick cause it is way to hard to install.

        Comment

        • Markus
          Recognized Expert Expert
          • Jun 2007
          • 6092
          #3
          An HTML/CSS option:

          Code:
          <div style="width: 10px; height: 10px; overflow: hidden;">
	 <img src="http://img80.imageshack.us/img80/3654/imgz.jpg" />
</div>

            Comment

            • ziycon
              Contributor
              • Sep 2008
              • 384
              #4
              Originally posted by Markus
              An HTML/CSS option:

              Code:
              <div style="width: 10px; height: 10px; overflow: hidden;">
	 <img src="http://img80.imageshack.us/img80/3654/imgz.jpg" />
</div>
              What does the overflow attribute do?

                Comment

                • Ciary
                  Recognized Expert New Member
                  • Apr 2009
                  • 247
                  #5
                  cuts of everything beyond the border of your element. you'll have to give it a specific width and height though

                  also, you can position the image to eg -10px to cut of on the left and top side of the image

                  (actually, this method is better then php. i just forgot the possibilities of html/css for a moment :-s)

                    Comment

                    • ziycon
                      Contributor
                      • Sep 2008
                      • 384
                      #6
                      Cool, i'll give this a shot and let you know. Thanks.

                        Comment

                        • Atli
                          Recognized Expert Expert
                          • Nov 2006
                          • 5062
                          #7
                          Originally posted by Ciary
                          (actually, this method is better then php. i just forgot the possibilities of html/css for a moment :-s)
                          Actually, it's not. But it is a lot easier and quicker to implement.

                          The main problem with this method (as I see it) is that you are sending a lot more data than you have to. You are sending parts of images that will never be seen.
                          PHP could cut of the parts you don't need and just send the rest.

                          Also, this method relies on the browser to position the image and show the parts you want seen. Browsers tend to disagree on how to interpret your pages, which could lead to your image being displayed incorrectly in certain browsers.
                          Using PHP, there would be nothing for the browser to misinterpret.

                          If this is some large-scale project of major importance, I would go with the PHP method.
                          If it's not a high priority project, the HTML/CSS method is ok.

                            Comment

                            Previous template Next
                            Working...