Jump to content


Photo

Image Viewer

css

  • Please log in to reply
3 replies to this topic

#1 liongold

liongold

    Newbie

  • New Members
  • Pip
  • 9 posts

Posted 19 March 2014 - 09:33 AM

I am currently building an image viewer something like a Gallery. However, I need to work with several images of different sizes. The viewer currently puts the image in a div and sets the background as a background image. I currently use this CSS code: 

background: url() no-repeat center cover


#2 rx3mer

rx3mer

    Advanced Member

  • Members
  • PipPipPip
  • 39 posts
  • LocationUK

Posted 19 March 2014 - 04:41 PM

background-size: 100% 100%;

 

Or

 

http://css-tricks.co...ckground-image/



#3 otuatail

otuatail

    Advanced Member

  • Members
  • PipPipPip
  • 875 posts

Posted 21 March 2014 - 05:36 AM

Is this all you are trying to do?

 

 

<img src="images/me.jpg" alt="my picture" width="300px">

 

This would make the width the same but the aspect ratio of the photos would affect the height and not all digital cameras have the same 1:1.5 ratio

 

 



#4 liongold

liongold

    Newbie

  • New Members
  • Pip
  • 9 posts

Posted 21 March 2014 - 01:22 PM

I don't think I explained myself well. What I want to do is "copy" what Google Chrome does. If the image can fit the div as it is, leave it like that. However, if the image is too big for the div make the div 'resize' the image to make it fit (cover does this right now). 






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com