Jump to content
Please Use CODE Tags

HTML inserting various pictures

chicksoup
By chicksoup
in Programming
 Share
Go to solution Solved by Ssoele,

Set in CSS

max-width: 100px;

Or add this to the img tag in the HTML

style="max-width: 100px"
Posted

Hello,

 

for school I have to compile a small website and I found out how to insert images, but the problem is that they are different sizes and I can't find a way to have them the same max size without them being out of proportion (too high, not wide enough etc.)

 

Is there an easy way to have a lot of pictures on a website look good? I'm making a cool builds log list, so they would be underneath eachother.

 

 

Any help is appreciated :)

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Use javascript to calculate the aspect ratio and set the maximum height and width of each one using that ratio.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Use javascript to calculate the aspect ratio and set the maximum height and width of each one using that ratio.

I don't know how to do that :/ and the problem isn't one image, but rather having two underneath each other and looking bad

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Solution

Set in CSS

max-width: 100px;

Or add this to the img tag in the HTML

style="max-width: 100px"

Projects | > Project DisplayGRID < | > Portable Virtualization Server < | > CORE GTX < | Projects

Community | > Schnitzel Teamspeak Server < | Community

Guides | > Getting started with a NAS < | > Setting up your Ubiquiti Access Points < | > pfSense Guide < | Guides

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

^^ This.

Current rig: CPU: AMD FX-8120  Cooling: Corsair H100i  Mobo: ASRock 970 Extreme 3  RAM: 8GB 1333Mhz  GPU: MSI GTX 660Ti Power Edition  Case: Fractal Design Define R4  Storage: 2TB Seagate HDD + 128GB Crucial SSD  PSU: be quiet! 730W bronze

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

thanks guys! you brought me on the right track. what I ended up doing was: width="700px" height="auto"

Link to comment
Share on other sites
Link to post
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
 Share
Go to topic listing Programming

×