IMG Position behoben und Überlauf verstecktes Problem

Ich setze ein IMG-Element position:fixed; und ich möchte ein anderes IMG in einem Kreis div Container, aber die overflow:hidden; funktioniert nicht, Jenseits des Containerteils ist nicht ausgeblendet.IMG Position behoben und Überlauf verstecktes Problem

wie die Demo. Browser: 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>

Wie kann ich dieses Problem lösen?

Quelle

2017-10-01 85Ryan

$('.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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 

 
<div class="myimg"> 
 
    <img src="http://www.stickaz.com/5862-6799-square/cute-icecream.png" /> 
 
</div> 
 

 
</body>

Quelle

2017-10-01 14:40:48

Während dieser Code die Frage beantworten kann, verbessert ein zusätzlicher Kontext, warum und/oder wie dieser Code die Frage beantwortet, seinen langfristigen Wert. –

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

[Dies ist ein Hintergrund, der anstelle des Bildes der Fragesbild 1.jpg verwendet wird]

<!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>

Quelle

2017-10-01 15:49:45

IMG Position behoben und Überlauf verstecktes Problem

Antwort

Verwandte Themen