IE 10 Bilder vertikal strecken?

ist der Code. es scheint, auf diesem Editor auf Stackoverflow zu arbeiten ... aber wenn sie auf IE10 macht es die palceholder Bild nehmen und streckt es (fast, als ob sie 200% in der Höhe und 100% in der BreiteIE 10 Bilder vertikal strecken?

waren

<style> 
 
section`enter code here` { 
 
     padding: 1em; 
 
     text-align: center; 
 
} 
 

 
.content { 
 
     margin: 0 auto; 
 
     max-width: 1000px; 
 
} 
 

 
.content > h2 { 
 
     clear: both; 
 
     margin: 0; 
 
     padding: 4em 1% 0; 
 
     color: #484B54; 
 
     font-weight: 800; 
 
     font-size: 1.5em; 
 
} 
 

 
.content > h2:first-child { 
 
     padding-top: 0em; 
 
} 
 

 

 
.grid { 
 
     position: relative; 
 
     margin: 0 auto; 
 
     padding: 1em 0 4em; 
 
     max-width: 1100px; 
 
     list-style: none; 
 
     text-align: center; 
 
} 
 

 
/* Common style */ 
 
.grid figure { 
 
     position: relative; 
 
     float: left; 
 
     overflow: hidden; 
 
     margin: 10px 1%; 
 
     min-width: 310px; 
 
     max-width: 310px; 
 
     max-height: 310px; 
 
     width: 48%; 
 
     background: #d30c55; 
 
     text-align: center; 
 
} 
 

 
.grid figure img { 
 
     position: relative; 
 
     display: block; 
 
       height: 100%; 
 
       width:auto; 
 
     max-height: 100%; 
 
     max-width: 100%; 
 
     opacity: 1; 
 
} 
 

 
.grid figure figcaption { 
 
     padding: 0em 2em 2em 2em; 
 
     color: #ffffff; 
 
     text-transform: uppercase; 
 
     font-size: 1.25em; 
 
     -webkit-backface-visibility: hidden; 
 
     backface-visibility: hidden; 
 
     -webkit-box-sizing: border-box; 
 
     box-sizing: border-box; 
 
} 
 

 
.grid figure figcaption::before, 
 
.grid figure figcaption::after { 
 
     pointer-events: none; 
 
} 
 

 
.grid figure figcaption, 
 
.grid figure figcaption > a { 
 
     position:absolute; 
 
     top: 0; 
 
     left: 0; 
 
     width: 100%; 
 
     height: 100%; 
 
} 
 

 
/* Anchor will cover the whole item by default */ 
 
/* For some effects it will show as a button */ 
 
.grid figure figcaption > a { 
 

 
     z-index: 1000; 
 
     text-indent: 200%; 
 
     white-space: nowrap; 
 
     font-size: 0; 
 
     opacity: 0; 
 
} 
 

 
.grid figure h2 { 
 
     word-spacing: -0.15em; 
 
     font-weight: 200; 
 
} 
 

 
.grid figure h2 span { 
 
     font-weight: 400; 
 
} 
 

 
.grid figure h2, 
 
.grid figure p { 
 
     margin: 0; 
 
} 
 

 
.grid figure p { 
 
     letter-spacing: 1px; 
 
     font-size: 68.5%; 
 
} 
 

 

 
/*---------------*/ 
 
/***** transition *****/ 
 
/*---------------*/ 
 

 
figure.effect-transition { 
 
     background-color: #a39d99; 
 

 
} 
 

 
figure.effect-transition img { 
 
     /* opacity: 0.7; */ 
 
     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; 
 
     transition: opacity 0.35s, transform 0.35s; 
 
     -webkit-transform: scale(1); 
 
     transform: scale(1); 
 
} 
 

 
figure.effect-transition:hover img { 
 
     opacity: 0.1; 
 
     -webkit-transform: scale(1); 
 
     transform: scale(1); 
 
} 
 

 
figure.effect-transition h2 { 
 
     margin-top: 80%; 
 
     -webkit-transition: -webkit-transform 0.35s; 
 
     transition: transform 0.35s; 
 
     -webkit-transform: translate3d(0,20px,0); 
 
     transform: translate3d(0,20px,0); 
 
} 
 

 
figure.effect-transition p { 
 
     margin: 1em 0 0; 
 
     padding: 0.6em; 
 
     border: 1px solid #fff; 
 
     opacity: 0; 
 
     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; 
 
     transition: opacity 0.35s, transform 0.35s; 
 
     -webkit-transform: translate3d(0,20px,0) scale(1.1); 
 
     transform: translate3d(0,20px,0) scale(1.1); 
 
} 
 

 
figure.effect-transition:hover h2 { 
 
     -webkit-transform: translate3d(0,0,0); 
 
     transform: translate3d(0,-170px,0); 
 
} 
 

 
figure.effect-transition:hover p { 
 
     opacity: 1; 
 
     -webkit-transform: translate3d(0,0,0) scale(1); 
 
     transform: translate3d(0,-30px,0) scale(1); 
 
} 
 

 

 

 
@media screen and (max-width: 50em) { 
 
     .content { 
 
       padding: 0 10px; 
 
       text-align: center; 
 
     } 
 
     .grid figure { 
 
       display: inline-block; 
 
       float: none; 
 
       margin: 10px auto; 
 
       width: 100%; 
 
     } 
 
} 
 
</style>

<div class="container"> 
 
<div class="content"> 
 
<div class="grid"> 
 
<figure class="effect-transition" style="background-color: #d40e8c;"><a href="#" target="_blank"><img alt="blabla" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=310%C3%97310&w=310&h=310" /></a> <figcaption> 
 
<h2>Go back <span>home</span></h2> 
 
<p>Some random text here</p> 
 
<a href="#" target="_blank">View more</a></figcaption></figure> 
 
</div> 
 
</div> 
 
</div>

(ich habe nicht den Code auf mich in diesem genauen Moment zu zeigen).

ich habe etwas mit HTML5 und CSS3 gebaut. Alles funktioniert wunderbar mit Ausnahme einiger Völker Computern (jeder hat IE10), die Bilddateien werden vertikal gestreckt?

Dies wird für meine Firma (intern) gebaut ... Gibt es einen Grund, warum dies nur bei einigen Versionen von IE10 passieren würde?

Danke, Nick

Quelle

2016-03-20 user1853848

Sie brauchen, um Ihren Code oder aber eine Antwort schreiben wird eine Vermutung – LGSon

jemand sein:

Bilder mehr

UPDATE nicht gestreckt wurden NOG. .......? – user1853848

Kann nicht auf meinem IE10 reproduzieren .. Was passiert, wenn Sie 'width: 48%;' in '.grid figure' auf eine feste Größe ändern? – LGSon

-1

Bitte mit der CSS prüfen, wie unten gezeigt,

img.someClass { max-width: 100%; width: auto }

Quelle

2016-03-20 18:39:52 fazil

Wäre es nicht Max-Höhe seit seiner Dehnung vertikal? – user1853848

Nein, es wird die Max-Höhe entsprechend der Breite des Containers nehmen. Damit wird das Bild richtig skaliert. – fazil

Was der Trick war für mich eine maximale Breite bei so etwas wie max-width Einstellung: 110px;

und danach eine Breite: 100%; NVM, das die img verursacht eine Breite von 0 auf Firefox

Quelle

2017-03-27 08:47:14 Gurbii

IE 10 Bilder vertikal strecken?

Antwort

Verwandte Themen