107

Sto provando da un paio di giorni a configurare la mia galleria di miniature in modo che tutte le immagini appaiano della stessa altezza e larghezza. Tuttavia, quando cambio il codice Css in,

max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;

Ottengo immagini tutte della stessa dimensione ma le proporzioni sono allungate rovinando le immagini. non c'è un modo per ridimensionare il contenitore dell'immagine e non l'immagine invece? permettendomi di mantenere le proporzioni. ma ridimensiona ancora l'immagine. (Non mi importa se taglio parte dell'immagine.)

Grazie in anticipo!

— Beaniie
fonte

184

questo è un problema noto con il ridimensionamento CSS, a meno che tutte le immagini non abbiano la stessa proporzione, non hai modo di farlo tramite CSS.

L'approccio migliore sarebbe avere un contenitore e ridimensionare una delle dimensioni (sempre la stessa) delle immagini. Nel mio esempio ho ridimensionato la larghezza.

Se il contenitore ha una dimensione specificata (nel mio esempio la larghezza), quando si dice all'immagine di avere la larghezza al 100%, la renderà l'intera larghezza del contenitore. L' autoaltezza farà sì che l'immagine abbia l'altezza proporzionale alla nuova larghezza.

Ex:

HTML:

<div class="container">
<img src="something.png" />
</div>

<div class="container">
<img src="something2.png" />
</div>

CSS:

.container {
    width: 200px;
    height: 120px;
}

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

— jackJoe
fonte

41

È necessario fissare un lato (ad esempio l'altezza) e impostare l'altro su auto.

Per esempio

 height: 120px;
 width: auto;

Ciò ridimensionerebbe l'immagine basandosi solo su un lato. Se trovi accettabile il ritaglio dell'immagine, puoi semplicemente impostare

overflow: hidden;

all'elemento genitore, che ritaglierebbe tutto ciò che altrimenti supererebbe le sue dimensioni.

— Nick Andriopoulos
fonte

L'ho provato, ma mi dà ancora immagini di dimensioni e forme diverse. Voglio che la galleria sia uniforme in questo modo, [] [] [] [] non come [] [] [] [] []

— Beaniie

2

usa una combinazione di entrambi i precedenti: imposta l'altezza su un numero (con la larghezza automatica per mantenere la scala) e limita il genitore a una larghezza specifica overflow: hiddenper ritagliare l'eccesso

— Nick Andriopoulos

25

Puoi usare la object-fitproprietà css3, qualcosa di simile

<!doctype html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    .holder {
      display: inline;
    }
    .holder img {
      max-height: 200px;
      max-width: 200px;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class='holder'>
    <img src='meld.png'>
  </div>
  <div class='holder'>
    <img src='twiddla.png'>
  </div>
  <div class='holder'>
    <img src='meld.png'>
  </div>
</body>

</html>

Espandi lo snippet

Non è esattamente la tua risposta, però, perché non allunga il contenitore, ma si comporta come la galleria e puoi continuare a disegnare lo imgstesso.

Un altro svantaggio di questa soluzione è ancora uno scarso supporto della proprietà css3. Maggiori dettagli sono disponibili qui: http://www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/ . La soluzione jQuery può essere trovata anche lì.

— dmitry_romanov
fonte

Grazie, bella soluzione. :)

— Bibhu

Questo è un po 'strano rispondere con una proprietà che è supportata solo in opera atm ?! caniuse.com/object-fit

— Simon Dragsbæk

4

Capisco il tuo punto, @ Simon, grazie. Ho detto che non ho idea se la proprietà sarà supportata ovunque, ma anche se non lo sarà , possiamo usarla come punto di partenza per google per alternative che la sostituiscono. Un altro motivo per pubblicare è che la risposta rimarrebbe per un po 'di tempo mentre i browser migliorano ogni giorno, quindi ho risposto anche per questo prossimo futuro .

— dmitry_romanov

1

Venendo su questa pagina diversi anni dopo, sono stato felice di trovare questa risposta "futura"!

— petzi

8

Per rendere le immagini regolabili / flessibili puoi usare questo:

/* fit images to container */
.container img {
    max-width: 100%;
    height: auto;
}

— Stanislav
fonte

5

Mettilo come sfondo sul tuo supporto, ad es

<div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height:120px;">
&nbsp;
</div>

Questo centrerà la tua immagine all'interno di un div 120x120 tagliando via ogni eccesso dell'immagine

— DickieBoy
fonte

2

Se non vuoi allungare l'immagine, inseriscila nel contenitore div senza overflow e centrala regolandone il margine, se necessario.

L'immagine non verrà ritagliata
Anche le proporzioni rimarranno le stesse.

HTML:

<div id="app">
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
</div>

CSS:

div#container {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    margin: 4px;
}
img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

— Bhushan Dangore
fonte

0

transform: scale(0.5);

Esempio:

<div>Normal</div>
<div class="scaled">Scaled</div>

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

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

vedere: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

— Contro Mahmoud K.
fonte

-1

se conosci lo spettro puoi usare padding-bottom con percentuale per impostare l'altezza a seconda del diff.

<div>
   <div style="padding-bottom: 33%;">
      i have 33% height of my parents width
   </div>
</div>

— reco
fonte

Modificare proporzionalmente le dimensioni delle immagini utilizzando i CSS?

HTML:

CSS:

Esempio: