Esiste un modo per fornire una copertina per l'auto-ridimensionamento dell'immagine solo con i CSS?

Question

E 'ben noto che l'utilizzo di max-altezza e max-width può rendere una misura automatica dell'immagine in un div, come il seguente:

.cover img { 
    max-width: 100%; 
    max-height: 100%; 
} 

C'è un modo per fare una copertura traslucida (impostando opacity: 0.8 a un div) che si adatta alla dimensione dell'immagine senza ottenere larghezza e altezza da javascript?

Quello che segue è il mio tentativo in jsfiddle. Posso solo farlo coprire l'intero contenitore, ma quello che voglio è solo per coprire l'immagine. La dimensione dell'immagine è variabile in quanto devono essere caricati dall'utente. https://jsfiddle.net/muorou0c/1/

Answer 1

Ecco un semplice FlexBox soluzione che dovrebbe essere abbastanza semplice:

.container { 
 
    display: block; 
 
    height: 300px; 
 
    width: 300px; 
 
    background-color: #000; 
 
    border: 2px solid red; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.inner { 
 
    position: relative; 
 
} 
 
.container img { 
 
    max-width: 300px; 
 
    max-height: 300px; 
 
    display: block; 
 
} 
 
.cover { 
 
    display: none; 
 
} 
 
.container:hover .cover{ 
 
    display: block; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: #FFF; 
 
    opacity: 0.8; 
 
}

<div class="container"> 
 
    <div class="inner"> 
 
    <img src="http://lorempixel.com/400/200/"> 
 
    <div class="cover"></div> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="inner"> 
 
    <img src="http://lorempixel.com/400/800/"> 
 
    <div class="cover"></div> 
 
    </div> 
 
</div>

Ci sono tre parti che rende questa soluzione lavoro:

1. Dimensioni del contenitore hard coded sul tag img (come larghezza massima: 300px, altezza massima: 300px), per mantenere le proporzioni e le dimensioni.
2. Utilizzo di un div contenitore interno che avvolge i contorni per il livello di copertina, impostando il limite su quanto può essere grande la copertina. Il .cover può essere sostituito con un elemento pseudo :: before o :: after, vedi il violino alternativo in basso.
3. Utilizzo di flexbox per centrare il contenitore interno nel contenitore esterno. Questo potrebbe anche essere fatto usando il trucco position position + translate3d usato per posizionare l'elemento .cover nella domanda originale, vedere il violino alternativo sotto.

Ecco un violino con le soluzioni alternativi dalla precedente punto 2 & 3: https://jsfiddle.net/muorou0c/18/

Answer 2

Se soddisfa le tue esigenze, ci sono a lot of filters puoi aggiungere sopra l'immagine (piuttosto che coprirla con un div colorato). Here's a example.

img:hover{ 
    -webkit-filter: brightness(200%); 
    filter: brightness(200%); 
} 

Answer 3

Ok ho apportato alcune modifiche al modo in cui il codice è stato organizzato.

.container { 
 
    position: relative; 
 
    display: block; 
 
    height: 300px; 
 
    width: 300px; 
 
    background-color: #000; 
 
    border: 2px solid red; 
 
} 
 
.image { 
 
    display: block; 
 
    content: ""; 
 
    width:auto; 
 
    position: relative; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%,-50%); 
 
    background-image: url("http://lorempixel.com/400/200/"); 
 
} 
 
.image:hover:after{ 
 
    display:block; 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #fff; 
 
    opacity: .5; /* if needed */ 
 
}

<div class="container"> 
 
    <div class="image"> 
 
    <img src="http://lorempixel.com/400/200/" style="visibility:hidden"/> 
 
    </div> 
 
</div>

Il tempo in cui si sta costruendo il vostro html aggiungere l'elemento IMG per mantenere l'altezza del contenitore utilizzando JavaScript. Penso che nel caso di uno scenario di immagine caricato l'html debba essere costruito dinamicamente.

riferimenti

Overlay image on dynamically sized div

How to get div height to auto-adjust to background size?

Why don't :before and :after pseudo elements work with `img` elements?

Answer 4

Suona come un lavoro per un elemento di pseudo.

.container{ 
 
    background:yellow; 
 
    border:2px solid red; 
 
    width:300px; 
 
    height:300px; 
 
    text-align:center; 
 
} 
 

 
.container:before{ 
 
    content: ""; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    height: 100%; 
 
    } 
 

 
.cover{ 
 
     position:relative; 
 
     display:inline-block; 
 
     vertical-align:middle; 
 
    } 
 
    
 
.cover:hover:after{ 
 
     content:""; 
 
     position:absolute; 
 
     top:0; 
 
     left:0; 
 
     right:0; 
 
     bottom:0; 
 
     max-width:inherit; 
 
     max-height:inherit; 
 
     opacity:.5; 
 
     background:blue; 
 
    } 
 

 
.container img{ 
 
    display:block; 
 
    max-width:300px; 
 
    max-height:300px; 
 
}

<div class="container"><div class="cover"><img src="http://lorempixel.com/400/200/"/></div></div>

Basta assegnare la proprietà background al selettore .cover:after per ottenere la sovrapposizione.

Answer 5

ho adattato il vostro violino, e ha aggiunto un ulteriore livello sotto contenitore

.container { 
 
    position: relative; 
 
    display: block; 
 
    height: 300px; 
 
    width: 300px; 
 
    max-height: 300px; 
 
    max-width: 300px; 
 
    background-color: #000; 
 
    border: 2px solid red; 
 
} 
 

 
.container2 { 
 
    max-width: inherit; 
 
    max-height: inherit; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%,-50%); 
 
    border: 2px solid cyan; 
 
} 
 

 
.container2 img { 
 
    max-height: inherit; 
 
    max-width: inherit; 
 
} 
 

 
.cover { 
 
    display: none; 
 
} 
 
.container:hover .cover{ 
 
    display: block; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: #FFF; 
 
    opacity: 0.8; 
 
}

<div class="container"> 
 
    <div class="container2"> 
 
    <img src="http://lorempixel.com/400/200/"> 
 
     <div class="cover"></div> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="container2"> 
 
    <img src="http://lorempixel.com/400/800/"> 
 
    <div class="cover"></div> 
 
    </div> 
 
</div>

Questo funziona impostando nel contenitore un max-height ans max-width. Questo va all'immagine tramite valori ereditari.

Quindi l'immagine ottiene la sua dimensione.

E l'elemento container2 ottiene le sue dimensioni dal bambino.

e, infine, la copertura utilizza la dimensione dalla container2

Answer 6

.container { 
 
    position: relative; 
 
    display: block; 
 
    height: 300px; 
 
    width: 300px; 
 
    background-color: #000; 
 
    border: 2px solid red; 
 
} 
 
.container img { 
 
    position: absolute; 
 
    display: block; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%,-50%); 
 
    object-fit: cover; 
 
    object-position: center; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.cover { 
 
    display: none; 
 
} 
 
.container:hover .cover{ 
 
    display: block; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: #FFF; 
 
    opacity: 0.8; 
 
}

<div class="container"> 
 
    <img src="http://lorempixel.com/400/200/"> 
 
    <div class="cover"></div> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <img src="http://lorempixel.com/400/800/"> 
 
    <div class="cover"></div> 
 
</div>