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

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