Am o 48x48 div și în interiorul ei există un element img, vreau pentru a se potrivi în div, fără a pierde nici o parte, în timp, raportul este păstrat, este realizabil folosind html și css?
Din păcate, max-lățime + max-înălțimea nu acoperă în totalitate sarcina mea... Așa că au găsit o altă soluție:
Pentru a salva Imaginea raport în timp ce scalarea, de asemenea, puteți folosi obiect-fit` CSS3 propperty.
Articol util: Control imagine rapoarte de aspect cu CSS3
img {
width: 100%; /* or any custom size */
height: 100%;
object-fit: contain;
}
Vești proaste: IE nu sunt acceptate (Pot Folosi)
Veți avea nevoie de unele JavaScript pentru a preveni trunchiere, dacă nu't știu dimensiunea imaginii la ora're scris 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%;
}
Dacă utilizați o Bibliotecă JavaScript ați putea dori să profite de ea.
<div>
<img src="something.jpg" alt="" />
</div>
div {
width: 48px;
height: 48px;
}
div img {
display: block;
width: 100%;
}
Acest lucru va face imaginea extinde pentru a umple părinte, din care dimensiunea acestuia este stabilit în anii div
CSS.
Am avut o mulțime de probleme pentru a obține acest lucru, fiecare soluție am găsit nici't par să funcționeze.
Mi-am dat seama că am avut de a stabili div afișare la flex, deci, practic, acest lucru este meu CSS:
div{
display: flex;
}
div img{
max-height: 100%;
max-width: 100%;
}
Pentru mine, următoarele CSS lucrat (testat din Chrome, Firefox și Safari).
Există mai multe lucruri să lucreze împreună:
,
max-width: 100%; " și " înălțime: auto;,
width: auto;` face img scala la orice dimensiune primul ajunge la 100%, păstrând raportul de aspectposition: relative; în container și
position: absolute;` în care copilul împreună cu partea de sus: 50%; " și " stânga: 50%; centru colțul din stânga sus al img în containerCSS:
.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%);
}
Setare fotografie ca imagine de fundal ne va da mai mult control asupra mărime și plasament, lăsând img tag-ul pentru a servi un scop diferit...
Mai jos, dacă vrem div a fi același raport de aspect ca pe o fotografie, apoi substituent.png este un mic transparent imagine cu același raport de aspect ca photo.jpg. Dacă fotografia este un pătrat, l's o 1px x 1px substituent, în cazul în care fotografia este o miniatură video, it's o 16x9 substituent, etc.
Specific la întrebarea, utilizați o 1x1 substituent pentru a menține div's square raport, cu o imagine de fundal folosind fundal-dimensiunea pentru a menține foto's raportul de aspect.
Am folosit background-position: centru centru;
deci, fotografia va fi centrat în div. (Alinierea foto în centru vertical sau de jos ar ieși urât cu fotografie în tag-ul 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>
Pentru a evita un plus de cerere http, converti imagine substituent la un date: URL.
<img src="data:image/png;base64,..."/>
puteți utiliza clasa "img-lichid" pentru versiunea mai nouă eu.e Bootstrap v4.
și poate folosi clasa "img-responsive" pentru versiunea mai veche, cum ar fi Bootstrap v3.
Utilizare:-
img tag-cu :-
class="img-lichid"
src="..."
Aici's un JavaScript abordare. Se scalează o imagine treptat în jos până când se potrivește în mod corect. Puteți alege cât de mult să se micșoreze de fiecare dată eșuează. Acest exemplu se micșorează de 10% de fiecare dată eșuează:
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);
});
Simțiți-vă liber pentru a copia și lipi direct.