在div上放置一个图像，用它调整大小-Placeanimageondiv,thatresizeswithit

I have a login page, with a form for a username and password. Sometimes I'll need to place an image on top of the login form, that resizes with said login form on smaller devices. Here's the login form today

我有一个登录页面，其中包含用户名和密码的表单。有时我需要在登录表单上放置一个图像，在较小的设备上使用所述登录表单调整大小。这是今天的登录表单

And with an image attached (just took one, this is not how I envision it :) )

并附上一张图片（刚拍了一张，这不是我想象的:)）

I imagine that i'll need some js to find the current placement and size of the form box, and then resize accordingly?

我想我需要一些j来查找表单框的当前位置和大小，然后相应地调整大小？

The reason I can't just resize it manually, is that there will be multiple different login pages, and I'll need to make it very easy to create a new context. The size and placement of the image will always be the same

我不能手动调整它的原因是，会有多个不同的登录页面，我需要让它很容易创建一个新的上下文。图像的大小和位置始终相同

  

    

      

        

          

          
        
        

          
          
            

              

                
                
              
            
            

              

                
                
              
            
            

              

                
                
              
            
          
        
        


          

            Register
            Forgot Pasword
          
        

      
    
  

2 个解决方案

  


div {
  width: 400px;
  height: 400px;
  background: #ff0000;
  position: relative;
}
div img {
  position: absolute;
  width: 50%;
  right: -20%;
  bottom: 0;
}

img{
height: 10vh;
width: 20vw;
}