根據瀏覽器大小自動調整解析度的全尺寸影像
P粉302160436
2023-08-16 11:40:39
<p>我有貨運網站。 </p>
<p>如何讓我的懸停圖片填滿整個螢幕，並且不受電腦螢幕解析度的影響。當我縮小瀏覽器視窗時，它們也應該進行裁剪和縮小。謝謝。 </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;
/* 將寬度和高度變更為縮放影像 */
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>我嘗試過使用像素，但那是特定於解析度的。 </p>
這段CSS程式碼使得滑鼠懸停時的影像覆蓋整個螢幕，同時保持其寬高比。影像將根據需要進行裁剪，並在瀏覽器視窗調整大小時進行調整。容器使用固定定位和flex對齊方式進行居中顯示，而object-fit: cover確保裁剪。
/* 将此CSS应用于您的鼠标悬停图像 */ .hover-image { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: flex; align-items: center; justify-content: center; overflow: hidden; /* 当图像大于屏幕时，这将隐藏任何溢出部分 */ } .hover-image img { width: 100%; /* 使图像占据容器的整个宽度 */ height: auto; /* 保持宽高比 */ object-fit: cover; /* 裁剪图像以覆盖容器并保持宽高比 */ }