Template:Img float/styles.css

From Dothack Info
Revision as of 21:03, 14 March 2025 by MysteryCorgi (talk | contribs) (Created page with "@media all and (max-width: 360px) { .img-center, .img-floatleft, .img-floatright { float: none !important; clear: none !important; margin: 0 auto !important; padding:0 !important; } } .img-center { →‎fake a centre with a floating span that takes all the width: float: left; clear: both; width: 100% !important; margin: 1em auto; padding: 0; } .img-center img, .img-floatleft img, .img-floatright img { /* do not allow image to over-spill container (e.g...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search
@media all and (max-width: 360px) {
	.img-center,
	.img-floatleft,
	.img-floatright {
		float: none !important;
		clear: none !important;
		margin: 0 auto !important;
		padding:0 !important;
	}
}
.img-center {
	/* fake a centre with a floating span that takes all the width */
	float: left;
	clear: both;
	width: 100% !important;
	margin: 1em auto;
	padding: 0;
}

.img-center img,
.img-floatleft img,
.img-floatright img {
	/* do not allow image to over-spill container (e.g. small screens) */
	max-width: 100%;
	/* keep aspect ratio even when shrunk */
	height: auto;
}

.img-floatleft {
	float: left;
	clear: left;
	margin: 0 1em 0 0;
	padding:0 0.5em;
	max-width: 100%;
}
.img-floatright {
	float: right;
	clear: right;
	margin: 0 0 0 1em;
	padding:0 0.5em;
	max-width: 100%;
}

.img-floatmissing {
	display:  block;
	border: 1px solid grey;
	font-size: 83%;
	font-style: italic;
}