如何裁剪图像以适应屏幕大小而不是在网页中调整大小？ [关闭]答案

【问题标题】：How do I crop an image for screen size rather than resizing it in a web page? [closed]如何裁剪图像以适应屏幕大小而不是在网页中调整大小？ [关闭]
【发布时间】：2021-09-12 04:25:52
【问题描述】：

所以我正在开发一个网页，该页面的顶部右侧有一个小列，左侧有一个图像，占据了该部分的其余部分并导致我的问题。

问题是图像超出了设备的屏幕尺寸，导致页面布局丢失。现在我不想调整它的大小以适应，而是 crop 根据屏幕尺寸从图像中增加额外的宽度，使其看起来相同，但你不能水平滚动页面就是我现在正在经历的。

我真的不知道这是否有意义，但如果您对如何解决这个问题有任何想法，请写在这里，我会尝试。

【问题讨论】：

嗨，欢迎来到 SO。请先拨打tour。然后阅读how to ask questions here。之后编辑问题以符合准则并提供minimal reproducible example 以获取调试详细信息。
overflow: hidden; 在图片的容器上？
哦，解决了裁剪图像的问题，现在我看到我已经将图像裁剪到容器的大小，并从左侧开始，我可以做些什么来扩展一直忽略父元素的边距？
你的意思是margin吗？还是您的意思是父元素的padding。在这种情况下，您可以在图像上给它一个负数，等于父元素的填充。
非常感谢，这实际上完全解决了我的问题。

标签： javascript html css image

【解决方案1】：

要裁剪图像而不调整其大小，您必须将overflow: hidden; 应用于父元素。

要对抗父元素的padding，您必须设置一个否定的margin，它等于父元素的padding。

div {
  padding: 20px;
  overflow: hidden;
}

img {
  margin: -20px;
}

/* for demonstration purpose only */
div {
  border: 1px solid red;
}

img {
  display: block;
}

<div>
  <img src="https://via.placeholder.com/900x200.jpg">
</div>

【讨论】：

【解决方案2】：

您将 img 标签更改为具有 img 背景的 div（我想您有 img 标签，但您没有指定）。然后无论里面的img，div都不会超出边界。

<div id="img"></div>
<style>
    #img {
       background: url("your img");
    } 
</style>
// Use this instead of <img src="your img">

【讨论】：

我已经尝试过这个解决方案，但由于某种原因，很难按照我想要的方式定位背景，感谢您的回答，我会用我收到的最佳答案更新问题。