J'ai un 48x48 div et à l'intérieur il y a un élément img, je veux l'intégrer dans le div sans perdre aucune partie, dans le temps le rapport est conservé, est-il réalisable en utilisant HTML et CSS?
Vous aurez besoin de JavaScript pour empêcher le recadrage si vous ne connaissez pas la dimension de l'image au moment de la rédaction du fichier css.
<div id="container">
<img src="something.jpg" alt="" />
</div>
<script type="text/javascript">
(function() {
var img = document.getElementById('container').firstChild;
img.onload = function() {
if(img.height > img.width) {
img.height = '100%';
img.width = 'auto';
}
};
}());
</script>
#container {
width: 48px;
height: 48px;
}
#container img {
width: 100%;
}
Si vous utilisez une bibliothèque JavaScript, vous voudrez peut-être en tirer parti.
Utilisez max-height:100%; max-width:100%;
pour l'image à l'intérieur du div.
Malheureusement, max-width + max-height ne couvrent pas complètement ma tâche .... J'ai donc trouvé une autre solution:
Pour enregistrer le rapport d'image lors de la mise à l'échelle, vous pouvez également utiliser object-fit
Propriété CSS3.
Article utile: Contrôle des formats d'image avec CSS3
img {
width: 100%; /* or any custom size */
height: 100%;
object-fit: contain;
}
Mauvaise nouvelle: IE non pris en charge ( Puis-je utiliser )
Utilisation de CSS uniquement:
div > img {
width: auto;
height : auto;
max-height: 100%;
max-width: 100%;
}
<div>
<img src="something.jpg" alt="" />
</div>
div {
width: 48px;
height: 48px;
}
div img {
display: block;
width: 100%;
}
Cela permettra à l'image de se développer pour remplir son parent, dont la taille est définie dans la CSS div
.
J'avais beaucoup de problèmes à faire fonctionner cela, chaque solution que j'ai trouvée ne semblait pas fonctionner.
Je me suis rendu compte que je devais régler l'affichage div pour fléchir, voici donc mon CSS
div{
display: flex;
}
div img{
max-height: 100%;
max-width: 100%;
}
Pour moi, le CSS suivant a fonctionné (testé dans Chrome, Firefox et Safari).
Il y a plusieurs choses qui travaillent ensemble:
max-height: 100%;
, max-width: 100%;
et height: auto;
, width: auto;
font que l'échelle img atteigne la première dimension de 100% tout en conservant les proportionsposition: relative;
dans le conteneur et position: absolute;
dans l'enfant ainsi que top: 50%;
et left: 50%;
centrer le coin supérieur gauche de l'image dans le conteneurtransform: translate(-50%, -50%);
déplace l'img vers la gauche et le haut de la moitié de sa taille, centrant ainsi l'img dans le conteneurCSS:
.container {
height: 48px;
width: 48px;
position: relative;
}
.container > img {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Essayez CSS:
img {
object-fit: cover;
height: 48px;
}
Si vous définissez la photo comme image d'arrière-plan, nous aurons plus de contrôle sur la taille et le placement, laissant ainsi la balise img remplir un objectif différent ...
Ci-dessous, si nous voulons que le div ait le même rapport d'aspect que la photo, alors placeholder.png est une petite image transparente ayant le même rapport d'aspect que photo.jpg. Si la photo est un carré, il s'agit d'un espace réservé de 1px x 1px, si la photo est une vignette vidéo, il s'agit d'un espace réservé de 16x9, etc.
Spécifiquement à la question, utilisez un espace réservé 1x1 pour conserver le rapport carré de la division, avec une image d'arrière-plan utilisant background-size
pour conserver le rapport de format de la photo.
J'ai utilisé background-position: center center;
pour que la photo soit centrée dans le div. (L'alignement de la photo dans le centre ou le bas vertical deviendrait moche avec la photo dans la balise img.)
div {
background: url(photo.jpg) center center no-repeat;
background-size: contain;
width: 48px; // or a % in responsive layout
}
img {
width: 100%;
}
<div><img src="placeholder.png"/></div>
Pour éviter une requête http supplémentaire, convertissez l'image de marque de réservation en données: URL .
<img src="data:image/png;base64,..."/>
Voici une approche tout en JavaScript. Il réduit progressivement l’image jusqu’à ce qu’elle s’ajuste correctement. Vous choisissez le montant à réduire à chaque échec. Cet exemple le réduit de 10% chaque fois qu'il échoue:
let fit = function (el, w, h, percentage, step)
{
let newH = h;
let newW = w;
// fail safe
if (percentage < 0 || step < 0) return { h: h, w: w };
if (h > w)
{
newH = el.height() * percentage;
newW = (w / h) * newH;
if (newW > el.width())
{
return fit(el, w, h, percentage - step, step);
}
}
else
{
newW = el.width() * percentage;
newH = (h / w) * newW;
if (newH > el.height())
{
return fit(el, w, h, percentage - step, step);
}
}
return { h: newH, w: newW };
};
img.bind('load', function ()
{
let h = img.height();
let w = img.width();
let newFit = fit($('<img-wrapper-selector>'), w, h, 1, 0.1);
img.width(newFit.w);
img.height(newFit.h);
});
N'hésitez pas à copier et coller directement.
vous pouvez utiliser la classe "img-fluid" pour les versions plus récentes, à savoir Bootstrap v4.
et peut utiliser la classe "img-responsive" pour les versions antérieures, comme Bootstrap v3.
Usage: -
balise img avec: -
classe = "img-fluid"
(src} _ = "..."