旋转图像中的图像

Question

我有两张图片：一张应该像一个边框，在悬停时会旋转，另一张应该在第一张旋转的图片中。我该如何将第二张图片放在第一张图片中？以下是我的代码和jsfiddle链接...

<div class="col-xs-4" style="text-align:center;margin-top:20px;background:black;">              
    <img class="img-responsive rotate" src="http://s21.postimg.org/s70s6ioyb/Okvir_rotirajuci.png"  style="display:inline-block;"/>         
    <img class="img-responsive" src="http://s23.postimg.org/d0uos0jvb/E_mail.png"  style="display:inline-block;"/>          
</div>

我的CSS...

 .rotate{
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
.rotate:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
} 

JSFIDDLE

- Shile

Answer 1

我必须使用几个嵌套的元素来实现以下三个目标：

1. 旋转边框和信封图标重叠并对齐。
2. 图像对水平居中。
3. 图像对的大小是响应式的。

解释：

元素

是

的居中子元素，为两个图像提供容器。它的宽度是

的100％，但不超过42px（您的图像宽度）。

元素

为

（因此为

）提供高度。由于内部的图像被绝对定位（以便重叠），因此它们没有高度，并且不会撑开其容器。

的设置为其父元素宽度的100％，从而形成响应式正方形支撑结构。

图像被绝对定位在彼此之上，最后一个“边框”处于DOM中，以便它将位于堆叠顺序的顶部（用于悬停）。

<div class="col-xs-4 container">
    <div class="image_wrap">
        <div class="image_height_prop">            
            <img class="icon" src="http://s23.postimg.org/d0uos0jvb/E_mail.png" />
            <img class="rotate" src="http://s27.postimg.org/x4d8qxe73/square.png" />
        </div>
    </div>
</div>

CSS

div.container {
    text-align:center;
    background:black;
    margin-top:20px;
}
div.image_wrap {    
    display:inline-block;
    max-width:42px;
    width:100%;
}
div.image_height_prop {
    position:relative;    
    width:100%;
    padding-top:100%;
    height:0;
}
div.image_wrap img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

img.rotate {
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
img.rotate:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

工作示例

如@chiliNUT所提到的，"border"图像中的框是偏离中心的。我把图像居中并重新上传了它。作为另一种选择，你可以给"envelope"图像添加1像素的左边距来调整框的偏移。

img.rotate {
    margin-left:1px;
}

An example of that

- showdev

Answer 2

这样做就可以了：

将图像包装在一个inline-block div中。 删除两个图像的inline-block样式。 使第一张图片position:absolute，这将使其强加在第二张图片上。 保持第二张图片的样式不变，img元素默认为display:inline，这是我们想要的。

请参见我对你的fiddle的更新http://jsfiddle.net/T8Pjh/17/。

<div class="col-xs-4" style="text-align:center;margin-top:20px;background:black;position:relative;">
    <div style=display:inline-block;>
        <img class="img-responsive rotate" src="http://s21.postimg.org/s70s6ioyb/Okvir_rotirajuci.png" style="position:absolute;" />
        <img class="img-responsive" src="http://s23.postimg.org/d0uos0jvb/E_mail.png" />
    </div>
</div>

- chiliNUT

---

是的，这就是关于它的问题... 但是电子邮件图片没有完全居中在另一张图片内。我该怎么办？ - Shile

这似乎不是准确响应的。 - showdev

我注意到了。如果你仔细检查一下你的图片，回头看一下原始的fiddle http://jsfiddle.net/T8Pjh/15/ 并在浏览器中选择全部，你会发现你的“box”图片没有居中，但是邮件图片是居中的，这就导致了不一致。 - chiliNUT

响应式是一个要求。 - Shile

@chiliNUT 我的意思是，当你缩小浏览器窗口时，这两个元素就会失去对齐。 - showdev