响应头部根据显示尺寸显示图像的不同部分

Question

所以，我想为我的网站创建一个标题图片。我希望它能够做出响应，我正在采用“移动优先”的方法。我有一张图片，如标题所示，我希望它根据设备的显示大小进行不同的显示，但它仍然必须是相同的图像文件。例如，在移动设备上我只会看到图像的一小部分，但只要我达到一定宽度，它就会变为全尺寸。这个网站http://adopciaki.pl正是我想要的 - 我试图复制他们的布局，但无济于事。谢谢你的帮助！

Answer 1

有几种可能性可以实现这一目标，例如，在移动设备上： IMG {       位置：相对       宽度：汽车;       身高：100％;       左：50％;       transform：translateX（-50％）; }

这将使图像居中，给包装元素隐藏溢出

然后在平板电脑或桌面上，您可以将宽度设置为100％，将高度设置为自动等等......

Answer 2

一种解决方案是使用图像的SVG副本，并使用CSS媒体查询根据屏幕大小调整大小 - https://jsfiddle.net/rkr9psbf/1/

@media (min-width: 1200px) {
  img { 
    width: 300px; height: 300px;
  }
}

@media (max-width: 600px) {
  img { 
    width: 150px; height: 150px;
  }
}

通过缩小浏览器窗口，您会看到图像缩小到一半。希望这有帮助！