我想拉伸徽标的宽度并固定徽标的大小，以便清晰可见

问题描述

所选徽标应该足够可见。我添加了媒体查询，但无法正常使用。徽标可以沿宽度方向拉伸，但我不知道该怎么做。

到目前为止，我已经完成

<div class="row">
  <div class="col-6">
    <h3 class="eta m-0">Estimated Delivery Date</h3><br>
    <h1 class="textFontAndColor">Friday 29,September</h1>
  </div>
  <div class="col-6">
    <img src="https://cdn.worldvectorlogo.com/logos/united-states-postal-service.svg" class="fill"><br>
    <span class="textFontAndColor">EZ00093838993N</span>
  </div>

</div>

解决方法

图像文件本身周围有很多空白，因此，如果可能的话，使用包装div进行裁剪将有助于解决这种情况。

这里的样式可能不会立即起作用，但是通过眼神，我就可以将某些东西组合在一起，至少对我本人来说足够好。

<div class="col-6">
  <div class="imgWrapper">
    <img class="logo" alt="" src="https://cdn.worldvectorlogo.com/logos/united-states-postal-service.svg" class="fill">
   </div>
</div>

.imgWrapper {
  width: 400px;
  height: 150px;
  overflow: hidden;
}

.logo {
  width: 300px;
  height: 300px;
  margin: -75px 0 0 -300px;
}

因此，imgWrapper的宽度和高度控制着要显示的整体视点，并且使用logo的宽度和高度，您可以将徽标图像固定为适当的大小，并使用边距来获得位置是的。

,

您使用了错误的媒体查询语法；媒体查询的语法为：

@media (min-width: 768px) {
  selector {
    property: value;
  }
}

您也可以简单地为图像提供唯一的类名，以避免不必要的复杂的CSS选择器成为您正在使用的选择器。