Ik probeer een aantal grote afbeeldingen met HTML IMG-tags weer te geven. Op het moment dat ze van de rand van het scherm gaan; Hoe kan ik ze schalen om binnen het browservenster te blijven?
Of in het waarschijnlijke geval dat dit niet mogelijk is, is het mogelijk om op zijn minst te zeggen “dit beeld weergeven op 50% van de normale breedte en hoogte”?
De breedte- en hoogte-kenmerken vervormen de afbeelding – voor zover ik kan zien, dit komt omdat ze verwijzen naar welke kenmerken de kenmerken de container kan eindigen, wat niet gerelateerd is aan de afbeelding. Ik kan pixels niet specificeren omdat ik met een grote verzameling beelden met een andere pixelgrootte moet omgaan. Max. Breedte werkt niet.
Antwoord 1, Autoriteit 100%
Stel alleen de widthof heightin, en het zal de andere automatisch schalen. En ja, u kunt een percentage gebruiken.
Het eerste onderdeel kan worden gedaan, maar vereist JavaScript, dus werkt mogelijk niet voor alle gebruikers.
Antwoord 2, Autoriteit 16%
CSS is voldoende:
img {
width : desired_width;
height: auto; /*to preserve the aspect ratio of the image*/
}
Antwoord 3, Autoriteit 11%
Ik weet dat deze vraag al heel lang is gevraagd, maar vanaf vandaag is een eenvoudig antwoord:
<img src="image.png" style="width: 55vw; min-width: 330px;" />
Het gebruik van VW Hierin geeft aan dat de breedte ten opzichte van 55% van de breedte van de viewport is.
Alle belangrijke browsers ondersteunen dit tegenwoordig.
Controleer deze link .
Antwoord 4, Autoriteit 5%
Geen javascript vereist.
IE6 Internet Explorer 6
Percentage werkt alleen voor de breedte van een element, maar height:100%;werkt niet zonder de juiste code.
CSS
html, body { height:100%; }
Gebruik vervolgens een percentage op de juiste manier, en dynamisch updates op het wijzigen van de wijzers wijzigen.
<img src="image.jpg" style="height:80%;">
U hebt geen breedteattribuut nodig, de breedteweegschalen evenredig als het formaat van de browservenster is gewijzigd.
en dit kleine juweeltje, is in het geval dat de afbeelding is opgeschaald, het zal niet (overdreven) blokkeren (het interpoleert).
img { -ms-interpolation-mode: bicubic; }
Rekwisieten gaan naar deze bron:
Ultimate IE6 cheatsheet: Hoe 25+ Internet Explorer 6 bugs bevestigen
Antwoord 5, Autoriteit 4%
Voeg max-width: 100%;naar de imgtag werkt voor mij.
Antwoord 6, Autoriteit 2%
Ik denk dat de beste oplossing de grootte van de afbeeldingen via script of lokaal is en weer uploaden.
Vergeet niet dat u uw kijkers dwingt om grotere bestanden te downloaden dan nodig zijn
Antwoord 7, Autoriteit 2%
Gebruik de rechthoek van een automatische brievenbus / pillas in een rechthoek met vaste maat de object-fitCSS-onroerend goed. Dat is meestal wat ik wil, en het vermijdt het gebruik van code om erachter te komen welke de dominante dimensie is of – wat ik vroeger deed – embedden van een <SVG>element met een <image>Kind om de inhoud te wikkelen met zijn Nice preserveAspectRatioOpties.
<!DOCTYPE html>
<html>
<head>
<style>
:root
{
--box-side : min( 42vmin, 480px ) ;
}
body
{
align-items : center ;
display : flex ;
flex-wrap : wrap ;
justify-content : center ;
}
body,html
{
height : 100% ;
width : 100% ;
}
img
{
background : grey ;
border : 1px solid black ;
height : var( --box-side ) ;
object-fit : contain ;
width : var( --box-side ) ;
}
</style>
<title>object-fit</title>
</head>
<body>
<img src="https://alesmith.com/wp-content/uploads/logos/ALESMITH-MasterLogoShadow01-MULTI-A.png" />
<img src="https://ballastpoint.com/wp-content/themes/ballastpoint/assets/img/bp-logo-color.svg" />
<img src="https://d2lchr2s24ssh5.cloudfront.net/wp-content/uploads/2014/01/GF19_PrimaryLogo_RGB.png" />
<img src="https://s3-us-west-1.amazonaws.com/paradeigm-social/NeFAAJ7RlCreLCi9Uk9u_pizza-port-logo.svg">
<img src="https://s3-us-west-2.amazonaws.com/lostabbey-prod/Logos/Logo_Port_SM_Circle_White.png" />
</body>
</html>Antwoord 8
De beste manier waarop ik weet hoe ik dit moet doen, is:
1) Set Overflow om te bladeren en op die manier zou het beeld binnen blijven, maar je kunt scrollen om het in plaats daarvan te zien
2) Upload een kleinere afbeelding. Nu zijn er tal van programma’s die er zijn bij het uploaden (je hebt iets als PHP of .NET nodig om dit BTW te doen), je kunt het automatisch maken.
3) Wonen ermee en het instellen van de breedte en hoogte, hoewel het ertoe laat zien, er is verstoord, maar de juiste maat zal nog steeds resulteren in de gebruiker die de full-sized beeld moet downloaden.
Veel succes!