Question

这是带有文字悬停的两张照片网格的代码。我想让这个网格对移动设备做出响应，而我却不得不重新调整照片代码。这是我的代码 HTML：

<div class="plansgrid" align="center">
            <div class="pic">
                <img src="images/planssgrid/mcp.png" />
                <div class="text">
                    <h1 style="font-weight: bold;">Medical Cash Plan</h1>
                    <p>Recrive Cashback to reduce the cost of your everyday medical expenses</p>
                </div>
            </div>
            <div class="pic">
                <img src="images/planssgrid/pcp.png" />
                <div class="text">
                    <h1 style="font-weight: bold;">Personal Accident Plan</h1>
                    <p>Fracture benefits and cash lump sums from accidental injury</p>
                </div>
            </div>
        </div>

CSS：

.pic {
    display: inline-block;
    position: relative;
    max-width: 100%;
    height: auto;
    overflow: hidden;
}

.text {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 0;
    text-align: center;    
    background: rgba(255, 255, 255, 0.7);
    transition: height 0.7s ease-out;   
    color: darkgreen;
}
.pic:hover > .text {
    height: 150px;
}

当我从手机进入网站时，图像不会缩放，只会被歪曲。我想缩放此图像，以适应移动设备。请帮我解决一下这个。非常感谢你：D！

您可以在此预览此网格：http://hciit.atwebpages.com/

Answer 1

尝试将此添加到您的css，以使您的图像响应：

Stream
   .of(
      Tuple.of("foo", "x"),
      Tuple.of("foo", "y"),
      Tuple.of("bar", "x"),
      Tuple.of("bar", "y"),
      Tuple.of("bar", "z")
   )
   .foldLeft(
      HashMap.empty(), 
      (map, tuple) -> 
         map.put(tuple._1, map.getOrElse(tuple._1, List.empty()).append(tuple._2))
   );

Answer 2

在您的情况下，我认为理想的方法是调整图像大小并将其保存为多种不同的尺寸，因此在移动设备上无法下载全分辨率。然后你可以使用css技巧根据像这样的分辨率来调整它的大小

您可以在此处阅读更多相关信息CSS Tricks

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
    /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
    /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
    /* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
    /* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
}

我如何使用CSS缩放网格图像？

2 个答案: