Dit lijkt triviaal, maar na al het onderzoek en het coderen krijg ik het niet werkend. Voorwaarden zijn:
- De grootte van het browservenster is onbekend. Stel dus geen oplossing voor met absolute pixelgroottes.
- De oorspronkelijke afmetingen van de afbeelding zijn onbekend en passen mogelijk al in het browservenster.
- De afbeelding is verticaal en horizontaal gecentreerd.
- De beeldverhoudingen moeten behouden blijven.
- De afbeelding moet in zijn geheel in het venster worden weergegeven (niet bijgesneden.)
- Ik wil niet dat er schuifbalken verschijnen (en dat zouden ze ook niet moeten doen als de afbeelding past.)
- Het formaat van de afbeelding wordt automatisch aangepast wanneer de afmetingen van het venster veranderen, om alle beschikbare ruimte in te nemen zonder groter te zijn dan de oorspronkelijke grootte.
Wat ik eigenlijk wil is dit:
.fit {
max-width: 99%;
max-height: 99%;
}
<img class="fit" src="pic.png">
Het probleem met de bovenstaande code is dat deze niet werkt: de foto neemt alle verticale ruimte in beslag die nodig is door een verticale schuifbalk toe te voegen.
Ik heb PHP, Javascript, JQuery tot mijn beschikking, maar ik zou een moord doen voor een oplossing met alleen CSS. Het maakt me niet uit of het niet werkt in IE.
Antwoord 1, autoriteit 100%
Update 11-04-2018
Hier is een Javascript-loze, alleen CSS-oplossing. De afbeelding wordt dynamisch gecentreerd en aangepast aan het venster.
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.imgbox {
display: grid;
height: 100%;
}
.center-fit {
max-width: 100%;
max-height: 100vh;
margin: auto;
}
</style>
</head>
<body>
<div class="imgbox">
<img class="center-fit" src='pic.png'>
</div>
</body>
</html>
De [Other, Old] -oplossing, met behulp van jQuery, stelt de hoogte van de beeldcontainer (bodyin het onderstaande voorbeeld), zodat de max-heightonroerend goed op Het beeld werkt zoals verwacht. De afbeelding wordt ook automatisch de grootte wijzigen wanneer het clientvenster wordt verkleind.
<!DOCTYPE html>
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
}
.fit { /* set relative picture size */
max-width: 100%;
max-height: 100%;
}
.center {
display: block;
margin: auto;
}
</style>
</head>
<body>
<img class="center fit" src="pic.jpg" >
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function set_body_height() { // set body height = window height
$('body').height($(window).height());
}
$(document).ready(function() {
$(window).bind('resize', set_body_height);
set_body_height();
});
</script>
</body>
</html>
Opmerking: Gebruiker Gutierrezalex verpakte een zeer vergelijkbare oplossing als een jQuery-plug-in op deze pagina.
Antwoord 2, Autoriteit 44%
Hier is een eenvoudige CSS-oplossing (JSFiddle ), Werkt overal, mobiel en IE inbegrepen:
CSS 2.0:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
img {
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
HTML:
<body>
<img src="images/your-image.png" />
</body>
Antwoord 3, autoriteit 21%
CSS3 introduceert nieuwe eenheden die worden gemeten ten opzichte van de viewport, in dit geval het venster. Dit zijn vhen vw, die respectievelijk de hoogte en breedte van het kijkvenster meten. Hier is een eenvoudige oplossing met alleen CSS:
img {
max-width: 100%;
max-height: 100vh;
height: auto;
}
Het enige voorbehoud hierbij is dat het alleen werkt als er geen andere elementen zijn die bijdragen aan hoogte op de pagina.
Antwoord 4, autoriteit 12%
Als u bereid bent een containerelement rond uw afbeelding te plaatsen, is een pure CSS-oplossing eenvoudig. Zie je, 99% hoogte heeft geen betekenis wanneer het bovenliggende element zich verticaal uitbreidt om zijn kinderen te bevatten. De ouder moet een vaste hoogte hebben, bijvoorbeeld… de hoogte van het kijkvenster.
HTML
<!-- use a tall image to illustrate the problem -->
<div class='fill-screen'>
<img class='make-it-fit'
src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg'>
</div>
CSS
div.fill-screen {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
}
img.make-it-fit {
max-width: 99%;
max-height: 99%;
}
Speel met de viool.
Antwoord 5, autoriteit 4%
Formaat van afbeelding aanpassen zodat deze aan de langste zijde op het scherm past, waarbij de beeldverhouding behouden blijft
img[src$="#fit"] {
width: 100vw;
height: auto;
max-width: none;
max-height: 100vh;
object-fit: contain;
}
-
width: 100vw– afbeeldingsbreedte is 100% van de kijkpoort -
height: auto– de hoogte van de afbeelding wordt proportioneel geschaald -
max-height: 100vw– als de beeldhoogte meer zou worden dan de kijkpoort, wordt deze verkleind om op het scherm te passen, met als gevolg dat de beeldbreedte kleiner wordt vanwege de volgende eigenschap -
object-fit: contain– de vervangen inhoud wordt geschaald om de hoogte-breedteverhouding te behouden terwijl het in het inhoudsvak van het element pastOpmerking:
object-fitwordt pas volledig ondersteund sinds IE 16.0
Antwoord 6, autoriteit 4%
Ik weet dat er hier al een paar antwoorden zijn, maar dit is wat ik heb gebruikt:
max-width: 100%;
max-height: 100vh;
width: auto;
margin: auto;
Antwoord 7, autoriteit 3%
Mijn algemene luie CSS-regel:
.background{
width:100%;
height:auto;
background: url('yoururl.jpg') no-repeat center;
background-position: 50% 50%;
background-size: 100% cover!important;
overflow:hidden;
}
Dit kan inzoomen op uw afbeelding als deze om te beginnen een lage resolutie heeft (dat heeft te maken met uw afbeeldingskwaliteit en grootte in afmetingen.
Om je afbeelding te centreren, kun je ook proberen (in de CSS)
display:block;
margin: auto 0;
om je afbeelding te centreren
in uw HTML:
<div class="background"></div>
Antwoord 8, autoriteit 2%
Maak het eenvoudig. Bedankt
.bg {
background-image: url('https://images.unsplash.com/photo-1476820865390-c52aeebb9891?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
}<div class="bg"></div>Antwoord 9
Ik had een vergelijkbare vereiste en moest het doen met basis-CSS en JavaScript. Geen JQuery beschikbaar.
Dit is wat ik aan het werk heb gekregen.
<html>
<head>
<style>
img {
max-width: 95% !important;
max-height: 95% !important;
}
</style>
<script>
function FitImagesToScreen() {
var images = document.getElementsByTagName('img');
if(images.length > 0){
for(var i=0; i < images.length; i++){
if(images[i].width >= (window.innerWidth - 10)){
images[i].style.width = 'auto';
}
}
}
}
</script>
</head>
<body onload='FitImagesToScreen()'>
----
</body>
</html>
Opmerking:ik heb de breedte van de afbeelding niet 100% gebruikt, omdat er altijd een beetje opvulling moest worden overwogen.
Antwoord 10
Voor de toekomstige generaties, als je een oplossing wilt die 1-6 beantwoordt en 7 doet op een manier die het mogelijk maakt om het formaat verder te vergroten naar de oorspronkelijke grootte, dan heb ik een complete oplossing voor dit probleem ontwikkeld:
<!DOCTYPE html>
<html>
<body style="overflow:hidden; margin:0; text-align:center;">
<img src="https://file-examples-com.github.io/uploads/2017/10/file_example_JPG_2500kB.jpg" style="height:100vh; max-width:100%; object-fit: contain;">
</body>
</html>Antwoord 11
width: 100%;
overflow: hidden;
Ik denk dat dat voldoende moet zijn.
Antwoord 12
html, body{width: 99%; height: 99%; overflow: hidden}
img.fit{width: 100%; height: 100%;}
Of bekijk dit eens:
http://css-tricks.com/how-to-resizeable-background- afbeelding/
Antwoord 13
Voortbouwend op het antwoord van @Rohit, lost dit problemen op die zijn gemarkeerd door Chrome, worden de afbeeldingen op betrouwbare wijze vergroot en verkleind en werkt het ook voor meerdere afbeeldingen die verticaal zijn gestapeld, bijv. <img src="foo.jpg"><br><img src="bar.jpg"><br><img src="baz.jpg">Er is waarschijnlijk een elegantere manier om dit te doen.
<style>
img {
max-width: 99vw !important;
max-height: 99vh !important;
}
</style>
<script>
function FitImagesToScreen() {
var images = document.getElementsByTagName('img');
if(images.length > 0){
document.styleSheets[1].rules[0].style["max-height"]=((100/images.length)-1)+"vh";
for(var i=0; i < images.length; i++){
if(images[i].width >= (window.innerWidth - 10)){
images[i].style.width = 'auto';
}
}
}
}
</script>
</HEAD>
<BODY onload='FitImagesToScreen()' onresize='FitImagesToScreen()'>
<img src="foo.png">
</BODY>Antwoord 14
Gebruik deze code in uw stijltag
<style>
html {
background: url(imagename) no-repeat center center fixed;
background-size: cover;
height: 100%;
overflow: hidden;
}
</style>
Antwoord 15
Ik vond deze pure CSS-oplossing op w3 en testte dat het werkte.
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("../yourimage.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>