裁剪背景图像并缩放为 window 调整大小

Question

I am currently attempting to create a hero image on the home page of my react application. The issue I am running into is how the image currently sits.

currently the image sits a bit more centered than I would like, I am trying to duplicate something like this(please ignore the card in front of the background image):

I am unsure of how to position the background image further to the right and down a bit without there being white-space or it looking wonky on larger screens. I would also like the image to translate to the left as a screen is resized. The code I have attempted is as follows:

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;
}

attached is a code sandbox https://codesandbox.io/s/keen-montalcini-plwgc?file=/src/styles.css

Answer 1

To achieve what you want, you need to set transform-origin: top left for scale top left corner and set parent div as overflow: hidden; to keep it size

 .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>