html - 悬停时缩放和居中图像

Question

我正在为我的公司设计用户指南，需要找到一种更好的方式来查看图像。我已经在悬停时缩放以正常工作，但是只有当用户在查看图像时有一个大的计算机屏幕时，这才会正常工作。因此，我想将图像置于悬停中心。

此外，让图像根据窗口大小进行缩放会很不错。我有 Bootstrap 并且 jQuery 已链接。

我现在的代码

     .thumbnail {
        transition: transform .5s, left .5s; /* Animation */
    	margin: 0 auto;
        z-index: 2;
    }
    
       @media (min-width: 1600px) { 
       .thumbnail:hover {
    	transform: scale(1.75);
    
    }}
       
       @media (max-width: 1600px) { 
       .thumbnail:hover {
        transform: scale(1.5);
        position: relative;
        left: 25%;
    
    }}

    <img src="http://via.placeholder.com/350x150" class="thumbnail" style="width:800px; height:auto">
  

The big problem is the side menu who is part of the template on the business website. Click this link to see.

Answer 1

为 img 使用 object-fit 属性

.thumbnail {
 object-fit: cover;
}