裁剪背景图像和缩放窗口调整大小答案

【问题标题】：crop background image and scale as window resizes裁剪背景图像和缩放窗口调整大小
【发布时间】：2021-02-14 08:03:50
【问题描述】：

我目前正在尝试在我的 react 应用程序的主页上创建一个英雄图像。我遇到的问题是图像当前的位置。

目前图像比我想要的更居中，我正在尝试复制这样的东西（请忽略背景图像前面的卡片）：

我不确定如何将背景图像进一步向右和向下定位，而不会出现空白或在较大的屏幕上看起来很不稳定。我还希望图像在调整屏幕大小时向左平移。我尝试的代码如下：

JSX

import React from 'react'

const Home = () => {
  return (
    <div className='h-o'>
      <div className='h-i'></div>
    </div>
  )
}

export default Home

CSS：

.h-o {
  top: 181px;
  left: -44px;
  width: 100%;
  height: 644px;
  background: transparent url('../../Assets/Images/miami-courthouse.jpg') 0% 0%
    no-repeat padding-box;
  opacity: 1;
}

附上代码沙箱https://codesandbox.io/s/keen-montalcini-plwgc?file=/src/styles.css

【问题讨论】：

您知道developer.mozilla.org/en-US/docs/Web/CSS/background-size，如果知道，您需要哪些行为？
如果我了解您正在尝试使用位置 background-position: 150px 0; 作为示例，但您将不得不按照上述方式编辑尺寸
问题是如果我使用背景大小的封面，图像会像它在顶部一样，我只是不确定需要做什么才能将它推到右边而没有白色与之相伴的空间

标签： javascript css reactjs sass

【解决方案1】：

要实现你想要的，你需要设置transform-origin: top left 为左上角缩放并将父div 设置为overflow: hidden; 以保持其大小

.img-wrapper {
    display: inline-block;
    overflow: hidden;
}

img.resize {
  transform-origin: top left;
  transform:scale(1.1);
  -ms-transform:scale(1.1); /* IE 9 */
  -moz-transform:scale(1.1); /* Firefox */
  -webkit-transform:scale(1.1); /* Safari and Chrome */
  -o-transform:scale(1.1); /* Opera */
}

<div class="img-wrapper">
    <img src="https://i.imgur.com/aDExJLE.png" />
</div>
<div class="img-wrapper">
    <img class="resize" src="https://i.imgur.com/aDExJLE.png" />
</div>

【讨论】：

这似乎没有达到我想要的......