Question

我希望图像在点击时居中并缩放。到目前为止，这就是我所拥有的。问题是，当我按住图像上的点击来放大它时，h2和前2段有点过了对。此外，我希望它在点击时保持缩放，而不仅仅是当我按住点击时。这是HTML：

<div class="text1">

    <a href="#" style="text-decoration: none"><img src="house.jpg" width="200" height="150" >
    <h2>house</h2>
    <p>text</p></a>
    <p>texting</p>
    <p>txt</p>

</div>

这就是css：

.text1 img{
float:right;
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
        }

.text1 img:active {
    float:left;
    position: relative;
    display: inline-block;
    height: 100%;
    left:50%;
    transform:scale(4);
}

编辑：

 <script>

    var house = document.getElementById("house");
   function functie() {
        if(this.className == "enlarged")
            this.className = "";
        else
            this.className = "enlarged";
    }

</script>

这是在CSS中：

.text1 img{
    float:right;
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
            }

#house.enlarged{
    float:left;
    position: relative;
    display: inline-block;
    height: 100%;
    left:50%;
    transform:scale(4);
}

Answer 1

没有JavaScript，你不能这样做。（更新：显然你可以。看看starlocke的答案。不过，我会讨论JS解决方案。）

首先，您应该为图像添加ID，以便更容易选择。我给了它house，但你可以选择你喜欢的任何东西。

其次，将CSS选择器从.text1 img:active更改为类名enlarged。单击此类后，该类将分配给您的图像。

接下来，这是您的JavaScript代码：

var house = document.getElementById("house"); // Selects your image
house.onclick = function() { // Adds click listener
    this.className = "enlarged"; // Adds the class to the image, thus applying the new css properties
};

这是一个有效的JSFiddle：http://jsfiddle.net/jabdauc0/

此解决方案还使您无需使用<a>标记包装图片，更不用说您忘记了结束</a>。

编辑：再次点击图片时，使用此脚本还原原始状态：

var house = document.getElementById("house");
house.onclick = function() {
    if(this.className == "enlarged")
        this.className = "";
    else
        this.className = "enlarged";
};

EDIT²：如果您知道图片的宽度始终为200px，则可以使用以下CSS将其居中：

#house.enlarged {
    position: absolute;
    left: 50%;
    margin-left: -100px;
}

我也删除了float: left，因为这是文本跳到右边的原因。

Answer 2

对于纯HTML + CSS解决方案，请尝试以下操作：http://jsbin.com/neweyujube/1/edit?html,css,output

编辑，更像是OP（右对齐开始，添加左翻译）：http://jsbin.com/koraxowecu/1/edit

它已经方便地在示例中居中，并且，我想您需要添加其他包装器，以便中心效果在您的上下文中保持一致。我假设你有足够的经验和足够的技巧来处理那么多工作/修补你已经掌握了一个工作实例。

当我第一次进行编辑时，我已经实现了旋转+缩放效果，并且效果非常好。

这是https://stackoverflow.com/a/21919261/508823

的自然延伸

CSS图像居中

2 个答案: