I love the text image module and use it to make responsive banner titles. HTML text does not scale, but images can be made to scale. currently my css is set to respond with width only to keep the image in the container. See below. However, how do I add css to respond to the height? When text image puts the text into two lines the css below allows the image to extend below the bottom of the container. I tried adding 'max-height: 100%' but that didn't work in all browsers.

img {
	max-width: 100% !important;
	height: auto !important;
}

Comments

mondrake’s picture

mondrake
Location 🇮🇹
commented

Not really my favorite playground @webservant316 :(

... would fixing height be a possibility, i.e à la

img {
	height: 50px;
}
webservant316’s picture

webservant316 commented

turns out that max-height: 100% on the image worked after all, but for browser compatibility I needed to set height and width to 100% for both the containing div and the div containing the div.

webservant316’s picture

webservant316 commented
Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.