根据浏览器大小自动调整分辨率的全尺寸图像
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; /* 裁剪图像以覆盖容器并保持宽高比 */ }