Question

我设置了一个img元素position:fixed;，我想要一个圆形div容器中的另一个img，但overflow:hidden;不起作用，超出容器部分不会被隐藏。

像演示一样。浏览器：Safari 11.0。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<style>

    .wrap-1 img {
        position: fixed;
        width: 100%;
        height: 100%;
    }

    .wrap-2 {
        position: relative;
        width:300px;
        height:300px;
        overflow: hidden;
        border-radius: 50%;
        margin: auto;
        border: 5px solid #222;;
        background-color: #333;
    }

    .wrap-2 img {
        position: absolute;
        left: 50%;
        top: 50%; 
        min-height: 300px;
        min-width: 300px;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }

</style>
<body>
    <div class="wrap-1">
        <img src="1.jpg" />
    </div>
    <div class="wrap-2">
        <img src="2.jpg" />
    </div>
</body>
</html>

我该如何解决这个问题？

Answer 1

user

$('.myimg img').css("margin-left", ($('.myimg').width() / 2) - ($('.myimg img').width() / 2));

.myimg {
    margin:auto;
    width:300px;
    height: 300px;
    border-radius: 50%;
    overflow: hidden;
     background: yellowgreen;
}
.myimg img {
    /*position: relative;*/
    max-width:300%;
    max-height: 100%;
    cursor:pointer;
   
}

body{
margin-top:20px;
 background-color: skyblue;
}

Answer 2

this is a logo link. which is used in place of questioner's image 2.jpg

[这是用来代替提问者图像1.jpg的图像的背景]

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<style>

    .wrap-1 img {
        position: fixed;
        width: 100%;
        height: 100%;
    }

    .wrap-2 {
        position: relative;
        width:300px;
        height:300px;
        overflow: hidden;
        border-radius: 50%;
        margin: 0px auto;
        background-color: #333;
    }

    .wrap-2 img {
        position: absolute;
        left: 50%;
        top:200px; 
        min-height: 300px;
        min-width: 300px;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }

</style>
<body>
    <div class="wrap-1">
        <img src="ihttps://i.stack.imgur.com/vtPlA.gif" alt="background of first div" />
    </div>
    <div class="wrap-2">
        <img src="https://i.stack.imgur.com/EOgPm.gif" width="300px" height="300px" alt="logo used in place of .wrap" />
    </div>
</body>
</html>

＆＃13;

img位置固定和溢出隐藏的问题

2 个答案: