Ik merk dat mijn code responsief is, doordat als ik hem verklein tot het formaat van een telefoon of tablet, alle tekst, links en sociale pictogrammen dienovereenkomstig worden geschaald.
Echter, het ENIGE dat dat niet is, is mijn beeld in het lichaam; die is verpakt in alinea-tags … met dat gezegd zijnde, is er een eenvoudige manier om de afbeelding ook responsief te maken?
Hier is de code die ik gebruikte om mijn afbeelding in de body te laten zien:
<body>
<center>
<p><a href="MY WEBSITE LINK" target="_blank"><img src="IMAGE LINK" border="0" alt="Null"></a></p>
</center>
</body>
Antwoord 1, autoriteit 100%
Je kunt het proberen
<p>
<a href="MY WEBSITE LINK" target="_blank">
<img src="IMAGE LINK" style='width:100%;' border="0" alt="Null">
</a>
</p>
Dit zou je afbeelding moeten schalen in een vloeiende lay-out.
Voor responsive (wat betekent dat uw lay-out reageert op de grootte van het venster) kunt u een klasse aan de afbeelding toevoegen en @media-query’s in CSS gebruiken om de breedte van de afbeelding te wijzigen.
>
Houd er rekening mee dat het wijzigen van de hoogte van de afbeelding de verhouding verstoort.
Antwoord 2, autoriteit 46%
Breedte: 100% zal het breken als je op een breder gebied kijkt.
Hierna volgt img-fluidvan Bootstrap.
max-width: 100%;
display: block;
height: auto;
Antwoord 3, autoriteit 21%
Ik zou ook aanraden om alle CSS-eigenschappen in een ander bestand dan het HTML-bestand te gebruiken, zodat je je code beter kunt ordenen.
Dus om je img responsive te maken, zou ik het volgende doen:
Geef eerst uw <img>-tag een naam met een class– of id-kenmerk in uw HTML-bestand:
<img src="IMAGE LINK" border="0" class="responsive-image" alt="Null">
Vervolgens zou ik in mijn CSS-bestand de wijzigingen aanbrengen om het responsief te maken:
.responsive-image {
height: auto;
width: 100%;
}
Antwoord 4, autoriteit 6%
Om alle afbeeldingen op uw website responsief te maken, moet u uw inline HTML niet wijzigen van de juiste opmaak, aangezien width:100%niet in alle browsers werkt en problemen veroorzaakt in Firefox. U wilt uw afbeeldingen op uw website plaatsen zoals u dat normaal zou moeten doen:
<img src="image.jpg" width="1200px" height="600px" />
En voeg dan aan je CSS toe dat elke maximale breedte van een afbeelding 100% is met de hoogte ingesteld op automatisch:
img {
max-width: 100%;
height: auto;
}
Op die manier werkt je code in alle browsers. Het werkt ook met aangepaste CMS-clients (dwz Cushy CMS) die vereisen dat afbeeldingen de werkelijke afbeeldingsgrootte in de inline HTML hebben gecodeerd, en het is op deze manier eigenlijk gemakkelijker wanneer alles wat u hoeft te doen om afbeeldingen responsief te maken, eenvoudigweg in uw CSS-bestand dat de maximale breedte 100% is met de hoogte ingesteld op automatisch. Vergeet height: autoniet, anders worden je afbeeldingen niet goed geschaald.
Antwoord 5, autoriteit 5%
Ik gebruik deze techniek om het logo op een eenvoudige manier responsief te houden voor mobiele apparaten. Het logo wordt automatisch groter.
HTML
<div id="logo_wrapper">
<a href="http://example.com" target="_blank">
<img src="https://example.com/image.jpg" border="0" alt="logo" />
</a>
</div>
CSS
#logo_wrapper img {
max-width: 100%;
height: auto;
}
Antwoord 6, autoriteit 5%
Ik gebruik dit altijd
U kunt de klasse imgen de eigenschap max-widthaanpassen:
img{
width: 100%;
max-width: 800px;
}
max-widthis belangrijk. Anders wordt uw afbeelding te groot voor het bureaublad. Het is niet nodig om de eigenschap heightin te voeren, omdat dit standaard de automatische modus is.
Antwoord 7, autoriteit 4%
Als u beperkt bent tot het gebruik van een <img>-tag:
Ik heb gemerkt dat het veel gemakkelijker is om een <div>of een ander element naar keuzein te stellen met een background-image, width: 100%en background-size: 100%.
Dit is niet het alles is allesvoor responsieve afbeeldingen, maar het is een begin. Probeer ook te rommelen met background-size: coveren misschien wat positionering met background-position: center.
CSS:
.image-container{
height: 100%; /* It doesn't have to be '%'. It 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>
Antwoord 8, autoriteit 2%
Gebruik het volgende om een afbeelding responsief te maken:
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">
Antwoord 9, autoriteit 2%
Stel de hoogte of de breedte van de afbeelding in op %100.
Er is meer in Stack Overflow-vraag Hoe kan ik automatisch- het formaat van een afbeelding aanpassen zodat deze in een ‘div’-container past?.
Antwoord 10
Afbeeldingen moeten zo worden ingesteld
img { max-width: 100%; }
Antwoord 11
Gebruik Bootstrap om je foto’s vrij te maken
zoals getoond. Gebruik klasse img-responsive en je bent klaar:
<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">
Antwoord 12
In plaats van CSS toe te voegen om de afbeelding responsief te maken, voegt u afbeeldingen met verschillende resoluties tov. een andere schermresolutie zou de applicatie efficiënter maken.
Mobiele browsers hoeven niet dezelfde afbeelding met hoge resolutie te hebben die desktopbrowsers nodig hebben.
Met SASS is het gemakkelijk om verschillende versies van de afbeelding voor verschillende resoluties te gebruiken met behulp van een mediaquery.