Solution n ° 1 – La nouvelle propriété object-ajustement ( Pas encore de support IE )

Il suffit de définir object-fit: cover; sur l’img.

 body { margin: 0; } img { display: block; width: 100vw; height: 100vh; object-fit: cover; } 

Il existe en fait une solution css assez simple qui fonctionne même sur IE8:

 .container { position: relative; overflow: hidden; /* Width and height can be anything. */ width: 50vw; height: 50vh; } img { position: absolute; /* Position the image in the middle of its container. */ top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; /* The following values determine the exact image behaviour. */ /* You can simulate background-size: cover/contain/etc. by changing between min/max/standard width/height values. These values simulate background-size: cover */ min-width: 100%; min-height: 100%; } 

En supposant que vous pouvez vous arranger pour avoir un élément conteneur que vous souhaitez remplir, cela semble fonctionner, mais se sent un peu piraté. Essentiellement, j’utilise simplement min/max-width/height sur une plus grande surface et redimensionne ensuite cette zone dans les dimensions d’origine.

 .container { width: 800px; height: 300px; border: 1px solid black; overflow:hidden; position:relative; } .container.contain img { position: absolute; left:-10000%; right: -10000%; top: -10000%; bottom: -10000%; margin: auto auto; max-width: 10%; max-height: 10%; -webkit-transform:scale(10); transform: scale(10); } .container.cover img { position: absolute; left:-10000%; right: -10000%; top: -10000%; bottom: -10000%; margin: auto auto; min-width: 1000%; min-height: 1000%; -webkit-transform:scale(0.1); transform: scale(0.1); } 

 
contain
 
   
 
cover
 
    

Non , vous ne pouvez pas l’obtenir assez comme background-size:cover mais ..

Cette approche est assez étroite: elle utilise JavaScript pour déterminer si l’image est en mode paysage ou portrait et applique les styles en conséquence.

JS

  $('.myImages img').load(function(){ var height = $(this).height(); var width = $(this).width(); console.log('widthandheight:',width,height); if(width>height){ $(this).addClass('wide-img'); }else{ $(this).addClass('tall-img'); } }); 

CSS

 .tall-img{ margin-top:-50%; width:100%; } .wide-img{ margin-left:-50%; height:100%; } 

http://jsfiddle.net/b3PbT/

Essayez de définir à la fois min-height et min-width , avec display:block :

 img { display:block; min-height:100%; min-width:100%; } 

( violon )

À condition que l’élément contenant votre image soit position:relative ou position:absolute , l’image couvrira le conteneur. Cependant, il ne sera pas centré.

Vous pouvez facilement centrer l’image si vous savez si elle débordera horizontalement (définissez la margin-left:-50% ) ou verticalement (définissez la margin-top:-50% ). Il est peut-être possible d’utiliser des requêtes médias CSS (et certaines mathématiques) pour comprendre cela.

Ce que vous pouvez faire est d’utiliser l’atsortingbut ‘style’ pour append l’image d’arrière-plan à l’élément, de cette façon vous appellerez toujours l’image dans le HTML mais vous pourrez toujours utiliser le comportement background-size: cover css:

HTML:

CSS:

  .image-div{ background-size: cover; } 

Voici comment j’ajoute le comportement de la taille d’arrière-plan aux éléments que je dois charger dynamicment dans HTML. Vous pouvez alors utiliser des classes css géniales comme background-position: center. boom

J’avais besoin d’émuler la background-size: contain , mais je ne pouvais pas utiliser d’ object-fit raison du manque de support. Mes images avaient des conteneurs aux dimensions définies et cela a fini par fonctionner pour moi:

 .image-container { height: 200px; width: 200px; overflow: hidden; background-color: rebeccapurple; border: 1px solid yellow; position: relative; } .image { max-height: 100%; max-width: 100%; margin: auto; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } 

Pour IE, vous devez également inclure la deuxième ligne – width: 100%;

 .mydiv img { max-width: 100%; width: 100%; } 

Je n’ai pas le droit d’append un commentaire, mais ce que Eru Penkman a fait est plutôt d’actualité.

 .tall-img{ margin-top:-50%; width:100%; } .wide-img{ margin-left:-50%; height:100%; } 

Avec CSS, vous pouvez simuler object-fit: [cover|contain]; . Il utilise transform et [max|min]-[width|height] . Ce n’est pas parfait Cela ne fonctionne pas dans un cas: si l’image est plus large et plus courte que le conteneur.

 .img-ctr{ background: red;/*visible only in contain mode*/ border: 1px solid black; height: 300px; width: 600px; overflow: hidden; position: relative; display: block; } .img{ display: block; /*contain:*/ /*max-height: 100%; max-width: 100%;*/ /*--*/ /*cover (not work for images wider and shorter than the container):*/ min-height: 100%; width: 100%; /*--*/ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

 
Large square:  
 
Small square:  
 
Large landscape:  
 
Small landscape:  
 
Large portrait:  
 
Small portrait:  
 
Ultra thin portrait:  
 
Ultra wide landscape (images wider and shorter than the container):   

Je sais que c’est vieux, mais beaucoup de solutions que je vois ci-dessus ont un problème avec l’image / la vidéo étant trop grande pour le conteneur donc ne pas agir comme couverture de taille d’arrière-plan. Cependant, j’ai décidé de faire des “classes utilitaires” pour que cela fonctionne pour les images et les vidéos. Vous donnez simplement au conteneur la classe .media-cover-wrapper et l’élément multimédia lui-même la classe .media-cover

Ensuite, vous avez le jQuery suivant:

 function adjustDimensions(item, minW, minH, maxW, maxH) { item.css({ minWidth: minW, minHeight: minH, maxWidth: maxW, maxHeight: maxH }); } // end function adjustDimensions function mediaCoverBounds() { var mediaCover = $('.media-cover'); mediaCover.each(function() { adjustDimensions($(this), '', '', '', ''); var mediaWrapper = $(this).parent(); var mediaWrapperWidth = mediaWrapper.width(); var mediaWrapperHeight = mediaWrapper.height(); var mediaCoverWidth = $(this).width(); var mediaCoverHeight = $(this).height(); var maxCoverWidth; var maxCoverHeight; if (mediaCoverWidth > mediaWrapperWidth && mediaCoverHeight > mediaWrapperHeight) { if (mediaWrapperHeight/mediaWrapperWidth > mediaCoverHeight/mediaCoverWidth) { maxCoverWidth = ''; maxCoverHeight = '100%'; } else { maxCoverWidth = '100%'; maxCoverHeight = ''; } // end if adjustDimensions($(this), '', '', maxCoverWidth, maxCoverHeight); } else { adjustDimensions($(this), '100%', '100%', '', ''); } // end if }); // end mediaCover.each } // end function mediaCoverBounds 

Lorsque vous l’appelez, assurez-vous de redimensionner les pages:

 mediaCoverBounds(); $(window).on('resize', function(){ mediaCoverBounds(); }); 

Ensuite, le CSS suivant:

 .media-cover-wrapper { position: relative; overflow: hidden; } .media-cover-wrapper .media-cover { position: absolute; z-index: -1; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 

Oui, jQuery peut être nécessaire, mais il répond assez bien et agit exactement comme la taille d’arrière-plan: la couverture et vous pouvez l’utiliser sur des images et / ou des vidéos pour obtenir cette valeur SEO supplémentaire.

Nous pouvons prendre l’approche ZOOM. Nous pouvons supposer que 30% maximum (ou plus de 100%) peuvent être l’effet de zoom si la hauteur d’image OR largeur est inférieure à la hauteur OU largeur désirée. Nous pouvons cacher le rest de la zone non nécessaire avec un débordement: caché.

 .image-container { width: 200px; height: 150px; overflow: hidden; } .stage-image-gallery a img { max-height: 130%; max-width: 130%; position: relative; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } 

Cela ajustera les images avec une largeur ou une hauteur différente.

 background:url('/image/url/') right top scroll; background-size: auto 100%; min-height:100%; 

rencontré les mêmes symptômes exacts. ci-dessus a travaillé pour moi.

J’ai trouvé une solution simple pour émuler à la fois la couverture et le contenu, qui est un CSS pur, et fonctionne pour des conteneurs avec des dimensions dynamics, sans aucune ressortingction quant au rapport d’image.

Notez que si vous n’avez pas besoin de prendre en charge IE, ou Edge avant 16, il est préférable d’utiliser un ajustement d’object.

taille d’arrière-plan: couverture

 .img-container { position: relative; overflow: hidden; } .background-image { position: absolute; min-width: 1000%; min-height: 1000%; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) scale(0.1); z-index: -1; } 

 
  
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.