Redimensiona imaginea proporțional cu CSS?

Pentru a redimensiona imaginea proporțional folosind CSS:

img.resize {
    width:540px; /* you can use % */
    height: auto;
}

Dimensiunea de Control și de a menține proporția :

#your-img {
    height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;
}

Daca's o imagine de fundal, fundal utilizare-dimensiuni:contin.

Exemplu css:

#your-div {
  background: url('image.jpg') no-repeat;
  background-size:contain;
}

Încercați

transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);

Observați că width:50% va redimensiona la **50% din spațiul disponibil** pentru imagine, în timp ce max-width:50% va redimensiona imaginea pentru a **50% din dimensiunea ei naturale**. Acest lucru este foarte important să se ia în considerare atunci când se utilizează această reguli pentru mobile, web design, atât pentru mobile web designmax-width` ar trebui să fie întotdeauna utilizate.

Pentru a scala o imagine păstrând raportul de aspect

Încercați acest lucru,

img {
  max-width:100%;
  height:auto;
}

Puteți utiliza obiect-fit proprietate:

.my-image {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

Acest lucru se va potrivi imaginea, fără a schimba în mod proporțional.

Revizuit în 2015:

Am'am revizuit ca toate browserele comune au acum de lucru auto a sugerat de către Cherif de mai sus, așa că funcționează chiar mai bine ca tine don't nevoie să știu dacă imaginea este mai larg decât înalt.

versiune mai veche: Dacă vă sunt limitate de cutie de 120x100 de exemplu, puteți face

Proprietățile css max-lățime și max-înălțimea de lucru mare, dar nu't susținută de IE6 și cred IE7. Doriți să utilizați acest lucru pe înălțime / lățime, astfel încât să don't accidental scala imaginea de sus. Ai vrea doar să te limita maximă de înălțime/lățime în mod proporțional.

a lucrat foarte bine pentru mine ... Sau imi scapa ceva?

Edit: Dar vezi Shawn's precizare cu privire la accidental migrare.

img{
    max-width:100%;
    object-fit: scale-down;
}

lucrează pentru mine. Cântare jos imagini mai mari pentru a se potrivi în caseta, dar frunzele mai mici, imagini de dimensiunea lor inițială.

Utilizați acest ușor de scalare tehnica

img {
    max-width: 100%;
    height: auto;
}
@media {
  img { 
    width: auto; /* for ie 8 */
  }
}

Cred că acest lucru este cel mai simplu mod de a face, de asemenea, posibil, folosind prin inline "stil" atribut în ` tag.

.scaled
{
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
}

sau

img {
    max-width:100%;
}

div {
    width:100px;
}

cu acest fragment o poți face într-un mod mai eficient

Putem redimensiona imaginea folosind CSS în browser-ul folosind interogări mass-media și principiul de design receptiv.

    @media screen and (orientation: portrait) {
img.ri {
    max-width: 80%;
  }
}

@media screen and (orientation: landscape) {
  img.ri { max-height: 80%; }
}

Încercați acest lucru:

div.container {
    max-width: 200px;//real picture size
    max-height: 100px;
}

/* resize images */
div.container img {
    width: 100%;
    height: auto;
}

Mereu ai nevoie de ceva de genul asta

html
{
    width: 100%;
    height: 100%;
}

în partea de sus a fișierului css

image_tag("/icoane/icon.gif", inaltime: '32', lățime: '32') Am nevoie pentru a seta înălțimea: '50px', latime: '50px' la etichetă de imagine și acest cod funcționează de la prima încercare notă am incercat tot codul de mai sus dar nu noroc astfel încât acesta funcționează și aici este codul meu din _nav.html.erb: <%= image_tag("#{current_user.imagine}", inaltime: &#39;50px&#39;, latime: &#39;50px&#39;) %>