Combine percentual tamanho do fundo e tampa do tamanho do fundo

votos
0

Aqui, eu tenho algumas divs de vários tamanhos, e eu estou aplicando uma imagem de fundo a eles:

div {
  border: solid 2px red; 
  background-image: url('https://www.360nobs.com/wp-content/uploads/2016/02/lady-gaga.jpg'); 
  background-size: cover; 
  background-repeat: no-repeat; 
  
  display: inline-block; 
  margin: 2em;   

}

.a {
  width: 100px; 
  height: 200px; 
}

.b {
  width: 200px; 
  height: 100px ; 
}

.c {
  width: 200px; 
  height: 200px; 
}
<div class =a> </div> 
<div class =b> </div> 
<div class =c> </div> 

Agora, eu só quero mostrar a imagem na metade esquerda da div, mas eu quero-o para cobrir a altura total. O fundo não deve deformar, em vez disso, deve zoom / stretch.

Uma maneira de fazer isso é adicionar posição certa sobre ele:

div {
  border: solid 2px red; 
  background-image: url('https://www.360nobs.com/wp-content/uploads/2016/02/lady-gaga.jpg'); 
  background-size: cover; 
  background-repeat: no-repeat; 
  
  display: inline-block; 
  margin: 2em;   

 background-position: top right 50px; //Actually in my situation I would just use vw; 

}

.a {
  width: 100px; 
  height: 200px; 
}

.b {
  width: 200px; 
  height: 100px ; 
}

.c {
  width: 200px; 
  height: 200px; 
}
<div class =a> </div> 
<div class =b> </div> 
<div class =c> </div> 

Mas o problema com isto é que ele mostra apenas o lado direito da imagem, enquanto no meu cenário Eu quero que ele seja espetáculo da esquerda, ou mostrar a partir do centro.

Existe uma maneira de aplicar um clipe para a imagem de fundo? Minha solução alternativa é colocar uma div no topo para escondê-lo.

Publicado 08/11/2018 em 06:51
fonte usuário
Em outras línguas...                            


2 respostas

votos
1

Eu consideraria um elemento pseudo que será a sua camada de fundo:

.box {
  border: solid 2px red;
  background-image: url('https://www.360nobs.com/wp-content/uploads/2016/02/lady-gaga.jpg');
  background-size: 0 0;
  display: inline-block;
  margin: 2em;
  position: relative;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:50%;
  bottom:0;
  background-image:inherit;
  background-size:cover;
}

.a {
  width: 100px;
  height: 200px;
}

.b {
  width: 200px;
  height: 100px;
}

.c {
  width: 200px;
  height: 200px;
}
<div class="a box"> </div>
<div class="b box"> </div>
<div class="c box"> </div>

Respondeu 08/11/2018 em 14:39
fonte usuário

votos
-2

você pode tentar adicionar background-attachment:fixed;ao seu fundo. espero que funcione.

Respondeu 08/11/2018 em 06:58
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more