How to resize images being used as buttons?

Authoring Twine
1

Twine Version: 2
Story Format: Sugarcube

I have these navigation arrows Imgur: The magic of the Internet which are far too large by default. However, when I write in the size limits like I would for normal images nothing changes.

[img[img/arrow/north.png][hall3]] [img[img/arrow/south.png][hall1]] [img[img/arrow/west.png][hall5]] [img[img/arrow/east.png][hall4]]

Not implying there is some sort of bug. Just that I am still learning and all the image size guides I find use quotation mark while the image to button system is brackets.

2

The image markup ([img[]]) doesn’t include the ability to directly specify a size for images. You’ll either need to use CSS, the HTML <img> tag, or both.

Some examples of things you could do (not an exhaustive list).

Image markup + wrapper + CSS

CSS:

.nav-arrows > img {
	width: …;
	height: …;
}

Markup:

@@.nav-arrows;[img[img/arrow/north.png][hall3]] [img[img/arrow/south.png][hall1]] [img[img/arrow/west.png][hall5]] [img[img/arrow/east.png][hall4]]@@
HTML tags

Only going to show one of the arrows, since the rest will be similar.

Markup:

<a data-passage="hall3"><img src="img/arrow/north.png" width="…" height="…"></a>
HTML tags + CSS

Only going to show one of the arrows, since the rest will be similar.

CSS:

.nav-arrow {
	width: …;
	height: …;
}

Markup:

<a data-passage="hall3"><img class="nav-arrow" src="img/arrow/north.png"></a>
2 Likes