Home Entrance Everyone Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
May 28, 2024 - @526.24 (what is this?)
Unread Topics | Unread Replies | Own Posts | Own Topics | Random Topic | Recent Posts
News: :ozwomp: Reminder: Forum messages stay readable for years! Keep yours high quality! :ozwomp:

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  Help with wiki styled gallery?


« previous next »
Pages: [1] Print
Author Topic: Help with wiki styled gallery?  (Read 721 times)
LittleGr33nIMP
Casual Poster ⚓︎
*


"Yay for me, Luigi!" -Luigi


View Profile WWW

First 1000 Members!Joined 2022!
« on: February 13, 2023 @276.82 »

EDIT: Accidentally attached two copies of the same files my bad. :drat:

How TF do you make a wikipedia styled gallery? :TnT: :pc:

Hey guys I'm currently working on updating this gallery section that I'm working on.
I tested different sized images and I sadly found out that vertical images changed the height of the gallery figure elements. I wanted containers that hold vertical images to maintain the same size as all the other gallery figures.

TLDR: I basically just want the figure elements in the gallery section to be roughly around 150px wide and tall, while keeping the images actual aspect ratio.

I'm asking here since I tried what I know and attempted looking stuff up and I'm kinda stumped. I've attached both the html and css if you want a more thorough look.


Here's an example of what I'm trying to go for with my gallery figures:
https://zeldawiki.wiki/wiki/Groose#Gallery

Here's 2 screenshots showing the issue.

Desktop:


Mobile:



* dummy.html (26.15 kB - downloaded 16 times.)
* common.css (14.64 kB - downloaded 16 times.)
* common.css (14.64 kB - downloaded 16 times.)
* dummy.html (26.15 kB - downloaded 14 times.)
« Last Edit: February 13, 2023 @278.36 by LittleGr33nIMP » Logged

Oh look it's some turtles with my butto-HEY WAIT GET BACK HERE!

🐢🐢 🐢🐢

Melooon
Hero Member ⚓︎
*****


So many stars!

SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games

View Profile WWW

a puppy for your travelsAlways My PalFirst 1000 Members!spring 2023!Squirtle!!!!MIDI WarriorMIDI Warrior1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!The Smallest Ozwomp Known To Man...
« Reply #1 on: February 13, 2023 @728.54 »

Soooo if I understand - you are asking how you can make images of any aspect (tall wide etc) fit into a standard box size without warping? That's an easy one :grin: Just wrap the image in a box and then set a fixed size on the box but a flexable size on the image!

CSS:
Code
.image_box {
  width: 150px;
  height: 150px;
}

.image_box img {
  max-height: 100%;
  max-width:100%;
}
HTML:
Code
<div class="image_box">
  <img src="https://melonking.net/images/window-3.gif" />
</div>
Here I have put a very tall image in a div called image_box - the box is limited to 150px - if the image is to tall it will be squished down, or if its too wide it will be squished sideways, but it will always keep its aspect!
Logged


everything lost will be recovered, when you drift into the arms of the undiscovered
LittleGr33nIMP
Casual Poster ⚓︎
*


"Yay for me, Luigi!" -Luigi


View Profile WWW

First 1000 Members!Joined 2022!
« Reply #2 on: February 13, 2023 @844.50 »

Woo it took a bit but I kinda got something working!  :ozwomp: :pc:
Until opera's android browser updates their compatibility with flex basis sadly this page might look a little scuffed lol.  (on the opera android browser)

Here's what it looks like now!

PC:


Mobile:


Thanks for the help Melon! :transport:
« Last Edit: February 13, 2023 @846.32 by LittleGr33nIMP » Logged

Oh look it's some turtles with my butto-HEY WAIT GET BACK HERE!

🐢🐢 🐢🐢

Pages: [1] Print 
« previous next »
 

Vaguely similar topics! (3)

[Transit Pass Gallery] 🚂

Started by NightdriftBoard ☺︎ ∙ General Interests

Replies: 8
Views: 2365
Last post October 13, 2022 @888.02
by SilkSkull
New Video: Ozwomp in the Gif Gallery

Started by MelooonBoard ➶ ∙ Art Gallery

Replies: 0
Views: 1050
Last post May 05, 2022 @502.82
by Melooon
Wikipedia appreciation thread!

Started by MelooonBoard ☞ ∙ Life on the Web

Replies: 8
Views: 1717
Last post December 12, 2023 @677.03
by myleszey

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies Forum Guide | Rules | RSS | WAP2


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi