Question

我有一个移动就绪页面的以下标记：

<section>
    <div class="cover-section">
          <img src="img/central-park.jpg" alt="" style="width:100%" class="hoverZoomLink">
     </div>
     <div class="logo-section">
        <div class="container postLeft hiddenClass visibleClass animated fadeInLeft">
           <img src="img/logos/instagram.png" alt="">
        </div>
     </div>
</section>

问题是，由于我在移动视图中为width:100%提供了img，因此整个图像看起来是成比例的，因此非常小。（因为这张图片很宽）。

我是否可以使用min-height:300px显示图片而不将图片添加为背景并将其设为cover？因为图像是动态生成的，所以在这种情况下将图像分配给特定的css类并不容易。

Answer 1

没有其他更好的解决方法：

img{/*but target to specific selector that you need*/
  min-height: 300px;
  max-width: 100%;
}

这会产生响应结果，但当最小高度符合要求时，则开始拉伸。

一个更好的解决方案是使用图像作为背景，并使用这样的css产生更好的响应式图像体验：

.cover-section{/*remove img inside this selector to use it as background*/
  background: url(image-path.jpg) no-repeat center;
  background-size: cover;/*don't forget to use vendor prefixes*/
  min-height: 300px;
  max-width: 100%;
}

Answer 2

您始终可以使用媒体查询来处理移动设备的CSS。如下所示:(我已经将你的img造型转移到了一个类'封面'）

.cover {
        width:100%;
 }

@media screen and (max-width: 500px) {

    .cover {
        min-height: 300px;
    }
 }   
</style>
<section>
    <div class="cover-section">
          <img src="img/central-park.jpg" alt="" class="cover hoverZoomLink">
     </div>
     <div class="logo-section">
        <div class="container postLeft hiddenClass visibleClass animated fadeInLeft">
           <img src="img/logos/instagram.png" alt="">
        </div>
     </div>
</section>

不确定这是否是你想要的。

图像在移动视图中调整大小

2 个答案: