Is there a way to make the images on this page grow to screen size when clicked, rather than extending past the boundaries of the screen? Currently, the images enlarge to twice their original size on click. How can I ensure that they expand responsively to fit the screen?
Below is the HTML code being used:
<div data-tilt class="thumbnail rounded js-tilt">
<img
alt="Project Image"
class="img-fluid"
src="assets/skateboard.jpg"
onnclick="enlargeImg()"
id="img1"
/>
</div>
And here is the corresponding CSS:
img {
transition: -webkit-transform 0.25s ease;
transition: transform 0.25s ease;
}
img:active {
-webkit-transform: scale(2);
transform: scale(2);
}