CSS Prevent Überlauf bei der Transformation Mit SCALE

ich habe ein Problem, wenn transform: scale();CSS Prevent Überlauf bei der Transformation Mit SCALE

grundsätzlich mit, ich bin diese Skala auf Bild verwenden, die overflow:hidden

Check diese Geige heraus für Live-Action hat: https://jsfiddle.net/ns3vm3x6/

HTML

<div id="container1"> 
    <img src="http://lorempixel.com/400/200"> 
</div> 
<p> i want this image to scale just like #example no. 2. how to achive this one? </p> 
<br><br> 
<div id="container2"> 
    <img src="http://lorempixel.com/400/200"> 
</div>

CSS

#container1 {width:100%; height:200px; border:2px solid red; 
overflow-x:scroll; overflow-y:hidden; white-space:no-wrap; } 

#container2 {width:100%; height:200px; border:2px solid red; white- space:no-wrap; } 
img {width:200px; height:200px; transition:transform 1s linear; } 
img:hover {transform:scale(2); }

, wie das Überlauf zu verhindern, wenn die Bildskalierung?

Was ist falsch an meinem Code?

Dank im Voraus ...

Quelle

2016-04-02 Ching Ching

Sie müssen position: absolute setzen für img

img {width:200px; 
height:200px; 
transition:transform 1s linear; 
position: absolute; 
}

JSFiddle

Quelle

2016-04-02 07:16:11 Pedram

dank jiiff für die Beantwortung, na ja, ich will das Bild nicht. 1 Skalierung wie Nr. 2, nicht anders –

Ich denke ich habe es, gib 'Position: absolut' zu deinem 'img', ist es was du willst? @ChingChing [JSFiddle] (https://jsfiddle.net/ns3vm3x6/7/) – Pedram

wow das ist wirklich cool! aber was ist, wenn ich mehrere Bilder habe? genau wie dieser https://jsfiddle.net/ns3vm3x6/8/ wurde das Bild versteckt –

Stellen Sie sicher, dass Behälter die Breite und Höhe wie Ihre gewünschte Ergebnis hat.

html

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title></title> 
</head> 
<body> 
    <div class="wrap"> 
    <div class="bg agent-1"></div> 
    </div> 
</body> 
</html>

weniger (css)

@keyframes fade-in { 
     from { 
     transform: scale(1); 
     } 
     to { 
     transform: scale(2); 
     } 
    } 
    .agent-1 { 
     animation: fade-in cubic-bezier(0.0, 0.0, 0.2, 1) 10s forwards; 
    } 

    .bg { 
     width: 100%; 
     height: 100%; 
     background-image: url(https://images.unsplash.com/photo-1498811107811-a20a5be82dc1?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=01f6b00c3415f756949a44aadb54567e); 
     background-size: cover; 
     background-position: center; 
    } 

    .wrap { 
     width: 300px; 
     height: 300px; 
     overflow: hidden; 
    }

Demo: https://jsbin.com/bavutanixu/edit?html,css,output

Quelle

2017-09-19 14:02:32

CSS Prevent Überlauf bei der Transformation Mit SCALE

Antwort

Verwandte Themen