如何设置放大的响应式图像？

Question

比如说，我有一个1920年的png标志，中心标识的底线延伸到图像的末尾...在桌面视图中它非常适合观看..但是当它进入媒体时，图像缩小了，所以图像中心的徽标变得太小了......这就是示例..

桌面视图

移动视图

所以我的问题是，有没有办法让图像的中心部分可以在媒体设备上进行缩放？

Answer 1

在这种情况下，您可以使用css3属性 示例：

.logo {
   -webkit-transform: scale(1.5);
    transform: scale(1.5); /* you can change the value also */
   -webkit-transform-origin: center;
    transform-origin: center;
}

将此代码用于移动设备视图端口..

Answer 2

请使用媒体查询正确显示您的徽标

@media (min-width:321px) and (max-width: 770px)
{
 #logo
 {
  height:80px;
  width:80px;
 }
}