Full-size images that automatically adjust resolution based on browser size
P粉302160436
2023-08-16 11:40:39
<p>I have a shipping website. </p>
<p>How can I make my hover image fill the entire screen and be independent of my computer screen resolution. When I shrink the browser window, they should also crop and shrink. Thanks. </p>
<pre class="brush:php;toolbar:false;">.hover-image {
display: flex;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
pointer-events: none;
flex-direction: column;
align-items: center;
justify-content: center;
/* Change width and height to scaled image */
width: 100vw;
height: auto;
}
.hover-image img {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
margin-bottom: 0;
}</pre>
Image Hover One
{image 1}
Image Hover Two
{image 2}
<p>I've tried using pixels, but that's resolution specific. </p>
This CSS code causes the image on mouseover to cover the entire screen while maintaining its aspect ratio. The image will be cropped as needed and adjusted when the browser window is resized. The container uses fixed positioning and flex alignment for centered display, while object-fit: cover ensures cropping.