it-swarm.com.de

Machen Sie ein Bild ansprechend - auf einfachste Weise

Ich habe schon lange nach einer Lösung dafür gesucht, ohne Glück. 

Ich stelle fest, dass mein Code darauf anspricht, wenn ich ihn auf die Größe eines Telefons oder Tablets herunterskaliere - der gesamte Text, die Links und die sozialen Symbole werden entsprechend skaliert.

Das einzige, was nicht ist, ist mein Bild im Körper. Was ist in Absatz-Tags verpackt .. mit dem gesagt, gibt es eine einfache Möglichkeit, das Bild auch ansprechbar zu machen?

Vielen Dank! 

Hier ist der Code, den ich verwendet habe, um mein Bild im Körper anzuzeigen:

</body> 
</center> 
<p><a href="MY WEBSITE LINK" target="_blank"><img src="IMAGE LINK" border="0" alt="Null"></a></p> 
</center>
</body>
63
Anonymous

Sie können es versuchen

<p>
  <a href="MY WEBSITE LINK" target="_blank">
    <img src="IMAGE LINK" style='width:100%;' border="0" alt="Null">
  </a>
</p>

Dies sollte Ihr Bild skalieren, wenn es in einem fließenden Layout ist.

Für responsive (dh Ihr Layout reagiert auf die Größe des Fensters) können Sie dem Bild eine Klasse hinzufügen und @media-Abfragen in css verwenden, um die Bildbreite zu ändern.

Wenn Sie die Höhe des Bildes ändern, wird das Verhältnis beeinträchtigt 

99
Nick Ginanto

Breite: 100% wird es brechen, wenn Sie einen größeren Bereich betrachten.

Das Folgende ist Bootstraps img-responsive

max-width: 100%; 
display:block; 
height: auto;
38
user706001

Ich würde auch empfehlen, alle CSS-Eigenschaften in einer anderen Datei als der HTML-Datei zu verwenden, damit Sie Ihren Code besser organisieren können.

Um Ihr IMG ansprechbar zu machen, würde ich folgendes tun:

Benennen Sie zunächst Ihr <img>-Tag mit einem class- oder id-Attribut in Ihrer HTML-Datei:

<img src="IMAGE LINK" border="0" class="responsive-image" alt="Null">

Dann würde ich in meiner CSS-Datei die Änderungen vornehmen, um sie ansprechbar zu machen:

.responsive-image {
  height: auto;
  width: 100%;
}
21
javidazac

Ich verwende diese Technik, um das Logo auf einfache Weise für mobile Geräte ansprechend zu halten. Die Größe des Logos ändert sich automatisch.

HTML 

<div id="logo_wrapper">
  <a href="http://example.com" target="_blank">
    <img src="http://example.com/image.jpg" border="0" alt="logo" />
  </a>
</div>

CSS 

#logo_wrapper img {
  max-width: 100%;
  height: auto;
}

Hoffe das wäre hilfreich.

Vielen Dank

4
Sumith Harshan

Um alle Bilder auf Ihrer Website ansprechend zu gestalten, ändern Sie Ihren Inline-HTML-Code nicht anhand der korrekten Markierung, da width: 100% nicht in allen Browsern funktioniert und Probleme in Firefox verursacht. Sie möchten Ihre Bilder auf Ihrer Website so platzieren, wie Sie es normalerweise tun sollten:

<img src="image.jpg" width="1200px" height="600px" />

und fügen Sie Ihrem CSS hinzu, dass die maximale Breite eines Bildes 100% beträgt, wobei die Höhe auf auto gesetzt ist:

img {
    max-width: 100%;
    height: auto;
}

Auf diese Weise funktioniert Ihr Code in allen Browsern. Es funktioniert auch mit benutzerdefinierten CMS-Clients (z. B. Cushy CMS), bei denen die tatsächliche Bildgröße der Bilder in den Inline-HTML-Code kodiert werden muss. Auf diese Weise ist es tatsächlich einfacher, wenn alles, was Sie für das Reagieren der Bilder tun müssen, einfach in Ihrem CSS-Status angegeben ist Datei, deren maximale Breite 100% beträgt, wobei die Höhe auf "auto" gesetzt ist. Vergessen Sie die Höhe nicht: Automatisch oder Ihre Bilder werden nicht richtig skaliert.

4
OB7

Ich benutze das die ganze Zeit

Sie können die Eigenschaften img class und max-width anpassen.

img{
    width: 100%;
    max-width: 800px;
}

max-width ist imp, sonst wird Ihr Bild für den Desktop zu stark skaliert. Die Eigenschaft height muss nicht angegeben werden, da standardmäßig der automatische Modus eingestellt ist.

4
Abhishek Goel

Zwei Jahre zu spät zu diesem Beitrag, aber ... sind Sie auf die Verwendung eines <img>-Tags beschränkt? 

Ich habe es viel einfacher gefunden, einen <div>oder ein anderes Element Ihrer Wahl mit einem background-image, width: 100% und background-size: 100% einzustellen. 

Dies ist nicht das Ende, alles beende alles für responsive Bilder, aber es ist ein Anfang. Versuchen Sie auch, mit background-size: cover herumzuspielen und vielleicht mit background-position: center zu positionieren.

CSS:

.image-container{
  height: 100%; // doesn't have to be '%' can also use 'px'
  width: 100%;
  margin: 0 auto;
  padding: 0;

  background-image: url(../img/exampleImage.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;

}

HMTL:

<div class="image-container"></div>
2
Beck

stellen Sie die Höhe oder die Breite des Bildes auf% 100 ein.

mehr dazu hier . Wie kann ich ein Bild automatisch an einen div-Container anpassen

2
btevfik

Um ein Bild ansprechend zu machen, verwenden Sie Folgendes:

CSS

.responsive-image {
        width: 950px;//Any width you want to set the image to.
        max-width: 100%;
        height: auto;
}

HTML

<img class="responsive-image" src="IMAGE URL">
2
JacobG182

Bilder sollten so eingestellt sein

img { max-width: 100%; }
1
pixel 67

verwenden Sie bootstrap, um sich mit Ihren Bildern frei zu bewegen. Verwenden Sie die Klasse img-responsive und Sie sind fertig

<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236"> 
0
Goodlife

anstatt css hinzuzufügen, um das Bild ansprechbar zu machen, fügen Sie Bilder mit unterschiedlicher Auflösung hinzu w.r.t. Eine andere Bildschirmauflösung würde die App effizienter machen.

Mobile Browser müssen nicht das gleiche hochauflösende Bild haben, das Desktop-Browser benötigen. 

Mit SASS lassen sich verschiedene Versionen des Bildes mit unterschiedlicher Auflösung für die Medienabfrage verwenden.

0
Gajendra Jena