Question

现在我的wordpress网站已设置好，因此当屏幕尺寸发生变化时图像会缩放。我希望相反，图像可以保持在屏幕中心的特定尺寸，并在屏幕尺寸变化时左右均匀地裁剪。

我尝试过max-width：none但是没有保留并剪裁页面中心的图像。

网站：Zxndesignco.com

相关图片是主页上唯一的图片。我只知道CSS所以我希望有一个CSS解决方案。

我正在采取的示例：https://gatewaydemo.wordpress.com/

感谢您的帮助。

Answer 1

一般的想法是不使用图像，而是将该图像改为该英雄部分的background-image。因此，请删除img代码并将此类内容添加到.sow-image-container height: 400px; background: url(https://zxndesignco.com/wp-content/uploads/2016/12/HomeImg.jpg) center top; background-size: cover

Answer 2

body{
  background-repeat:no-repeat;
	background-position:center center fixed;
	background-image:url(https://zxndesignco.com/wp-content/uploads/2016/12/HomeImg.jpg);
	background-attachment:fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
  height: 100%;
  }
.white{
   font-size: 24px;
  color: #fff;
}

<div>
  <p class="white">Here are some words</p>
  </div>

通常在身体或div中。我喜欢这个组，因为它涵盖了所有的浏览器基础。

如何在屏幕大小更改时停止缩放图像

2 个答案: