Question

我有一张图片尺寸：240px / 240px。此图片大小必须仅在宽屏幕上，在移动设备上，此图片必须为80px / 80px。我曾经尝试过的：

.picture{
    height:100%;
    min-height: 240px;        
    background: url("../../img/picture.png") no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}
@media screen and (max-width: 480px) .picture {
    height: 80px;
    transform:scale(.3);
}

但这种规模的父母阻止，bg缩放错误，完全正确，但那不是我需要的。它只是作物bg-picture。

Answer 1

您缺少媒体查询的<input type="time" name="st1" /><br/><input type="time" name="et1"/> <input type="submit" name="allot" class="gobutton" value="Allot Dates"/> if(isset($_POST['allot'])) { $c="$_POST[st1]"; $d="$_POST[et1]"; mysql_query("insert into allotdate values('$c','$d')"); if(mysql_affected_rows()>0) { echo "<script>alert('You have successfully alloted')</script>"; } }括号：

{}

Answer 2

如果您尝试设置固定的背景图像，这是缩放和对齐背景图像的示例：

.pic-wrap {
  display: block;
  height: 296px;
  background-image: url(https://pbs.twimg.com/profile_images/590966305248784384/1gX6-SY6_400x400.jpg);
  background-size: 256px;
  background-position: 20px 50%;
  background-repeat: no-repeat;
  padding-left: 296px;
  border: 1px solid #ddd;
}

@media only screen and (max-width: 320px) {
  .pic-wrap {
    background-size: 96px;
    height: 126px;
    padding-left: 126px;
  }
}

<div class="pic-wrap">
  <span class="label">Test</span>
</div>

Answer 3

试试这个 -

.picture{
    height:100%;
    min-height: 240px;        
    background: url("../../img/picture.png") no-repeat;
    background-size: 100% 100%;
    background-position: 50% 50%;
}

@media screen and (max-width: 480px){
  .picture {
      height: 80px;
      min-height: none;
      transform:scale(.3);
  }
}

如何减少背景图片的大小？

3 个答案: