Question

我想在另一张图片上显示一张图片。如果我调整大小，它必须具有响应性，切割图像的边缘。（见图片。我不能直接嵌入图片，没有10个声誉）。我怎样才能做到这一点？这是代码：

<div class="content">
<div class="content-item_1">
    <img class="img1" src="photo/image1.png" />
    text1. text text
   </div>
<div class="content-item_2">
    <img class="img2" src="photo/image1.png" />
    text2. text text
   </div>
</div>

像这样https://jsfiddle.net/5woswyxc/2/

但是图像2必须比图像1轻微，如果它调整大小。当尺寸减小时 - 文字1必须在图像2的顶部移动。（image1移到底部）

resized layout

Answer 1

试试这个：

  <body>
        <div class="content">
            <div class="parent">
                <img class="image1" src="http://openclipart.org/image/300px/svg_to_png/4112/Clue_Simple_Clouds.png" />
                <img class="image2" src="http://openclipart.org/image/300px/svg_to_png/4112/Clue_Simple_Clouds.png" />
            </div>
        </div>
        <style>
            .parent {
                position: relative;
                top: 0;
                left: 0;
                background-color: blue;
                width: 450px;
                height: 320px;
                overflow: hidden;
            }

            .image1 {
                position: relative;
                top: 0;
                left: 0;
            }

            .image2 {
                position: absolute;
                top: 30px;
                left: 70px;
            }
        </style>
    </body>

在另一个图像上显示图像，调整大小时的切割边缘（响应）

1 个答案: