How to resize images being used as buttons?

Authoring Twine
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