响应式标题根据显示大小显示图像的不同部分答案

【问题标题】：Responsive header displaying different parts of the image based on display size响应式标题根据显示大小显示图像的不同部分
【发布时间】：2018-04-21 17:00:21
【问题描述】：

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

【问题讨论】：

标签： html css twitter-bootstrap frontend bootstrap-4

【解决方案1】：

有几种可能性可以实现这一点，例如，在移动设备上：图像{ 位置：相对宽度：自动；高度：100%；左：50%；变换：translateX（-50%）； }

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

然后在平板电脑或台式机上，您可以将宽度设置为 100%，将高度设置为自动等等......

【讨论】：

【解决方案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;
  }
}

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

【讨论】：