Responsive Image Größenänderung Problem

Ich habe überall auf der Website nachgeschaut und jede Methode ausprobiert, die mir begegnet ist, aber ich habe immer noch kein Glück damit, dass dieses Bild reagiert und richtig skaliert. Es bleibt in seiner Standardgröße, egal welchen Code ich eingeben möchte. Ich ändere die Größe des Browsers und benutze einen Handy-Emulator und er bleibt gleich groß.Responsive Image Größenänderung Problem

HTML

<section class="image"> 
<div> 
<img class="info" src="jewelry-large-info.png"> 
</div> 
</section>

CSS

.image { 
display: -webkit-flex; 
display: flex; 
-webkit-justify-content: center; 
justify-content: center; 
} 
.info { 
height: auto; 
width: auto; 
max-width: 1500px; 
max-height: 666px; 
}

Wenn jemand es sehr geschätzt sehr helfen würde, und die Chancen sind ich wahrscheinlich nur etwas übersehen haben.

Quelle

2017-06-05 Jeff

Was ist das eigentliche Problem, das Sie haben, werden? Sie haben es nie in Ihrem Post erwähnt, bitte bearbeiten Sie die Frage – Huangism

'auto' ist nicht das gleiche wie ein Prozentsatz. Außerdem gibt es keinen Grund für das zusätzliche 'div' in Ihrem' section.image', und in diesem Fall gibt es auch keinen Grund für das Präfix "-webkit". –

Ok, ich habe das behoben, aber das Bild wird immer noch nicht skaliert. – Jeff

Was Sie tun müssen, ist das Bild eine Breite von 100% und eine Höhe von Auto geben. Dadurch bleibt es proportional und so breit wie das Elternteil.

Quelle

2017-06-05 20:02:58

Dies ist etwas, was ich ausprobiert habe, aber aus irgendeinem Grund wird es nur auf die linke Seite des Bildschirms verschoben und immer noch nicht skaliert. – Jeff

Ok aus irgendeinem Grund, ich denke, es war ein Problem mit etwas Code in meinem Header, als ich ein paar Dinge dort zwickte und jetzt das Bild schrumpft. – Jeff

In CSS ist der Wert 'auto' der Standardwert. Dadurch werden die Proportionen Ihres Bildes in keiner Weise verändert. In Ihrem Beispiel haben Sie auto für Ihre Breite und Höhe verwendet. Dadurch behält das Bild seine ursprünglichen Abmessungen. Sie können mehr darüber auf W3Schools lesen.

Versuchen Sie, der Breite und Höhe Werte hinzuzufügen, mit denen das Bild aussehen soll. Hier ist ein Beispiel für Ihr angefordertes Responsive-Image.

.image { 
 
    height: 100%; 
 
    width: auto; 
 
}

<img class="image" src="http://www.bultannews.com/files/fa/news/1395/11/16/671335_664.jpg" />

Quelle

2017-06-06 03:53:10

Eine weitere Option, die für die Automatisierung ansprechende Bilder funktionieren könnte zu Cloudinary JavaScript-Bibliothek versuchen.

Erstens gehören die Cloudinary JavaScript-Bibliothek in Ihre HTML-Seiten:

<script 
src="cloudinary-core-shrinkwrap.js" 
type="text/javascript"> 
</script>

setzen die img-Tag-Parameter

<img 
data-src="http://res.cloudinary.com/demo/image/upload/w_auto,c_scale/ 
smiling_man.jpg" 
class="cld-responsive">

und rufen Sie die Cloudinary ansprechende Methode:

<script type="text/javascript"> 
var cl = cloudinary.Cloudinary.new({cloud_name: "demo"}); 
// replace 'demo' with your cloud name in the line above 
cl.responsive(); 
</script>

Die Die responsive-Methode sucht nach allen Bildern auf der Seite, die den Klassennamen "Cld-responsive" haben , erkennt die verfügbare Breite für das Bild auf der Seite und aktualisiert dann die HTML-Bild-Tags entsprechend.

Werfen Sie einen Blick auf ihre Seite diese Methode beschreiben - http://cloudinary.com/documentation/responsive_images

Quelle

2017-06-13 12:23:59

Responsive Image Größenänderung Problem

Antwort

Verwandte Themen