0

Tengo un problema con una imagen a la hora de colocar en la esquina superior izquierda.

Ahora mismo se me centra en el medio del contenedor y se observan los lados blancos del div yo quiero que la imagen ocupe todo el contenedor, pero si pongo whigth 100%; entonces el contenedor se hace enorme yo quiero que ocupe el espacio que ya tengo definido, aunque corte parte de la imagen pero se me deforma todo, el código siguiente está centrada en medio pero no agranda todo, alguien podria guiarme gracias.

Aqui el Html esta la imagen que intento modificar(<ion-img class="product_image").

  <div class="main_content_div" *ngIf="dummy?.length==0">    
    <p class="title_p"> Productos cerca de ti </p>
    <ion-row class="items-row">
      <ion-col size="6" class="product_col" *ngFor="let product_item of product_list;let i = index">
        <div class="product_item">
          <ion-img class="product_image" [src]="product_item.image_list[0].file_url" (click)="open_product(product_item)" ></ion-img>

          <div class="product_infodiv">
            <div class="product_rowdiv"  (click)="open_product(product_item)" >
               <p class="product_price"> {{product_item.price +'€' }} </p>
               <ion-icon src="assets/icon/pin.svg" class="pin_icon"></ion-icon>
               <p class="product_city"> {{product_item.address.city }}</p>
            </div>
            <div class="product_rowdiv">
              <p class="product_title" >  {{product_item.title }}</p>
              <ion-icon *ngIf="product_item.user_id!=api.userdata.user_id" slot="icon-only" src="assets/icon/chat_btn.svg" class="chat_icon" (click)="open_chat(product_item)"></ion-icon>
            </div>
          </div>
        </div>       
      </ion-col>
    </ion-row>
  </div>

aqui el cogigo css:

.main_content_div{
  margin: 10px;
}


.product_item{
  box-shadow: 0 4px 10px rgb(0 0 0 / 30%);
  border-radius: 10px;
  cursor: pointer;
  border: 2px solid lightgrey;
  position: relative;
}



.product_image{
  // border-radius: 10px !important;
  // overflow: hidden;
  height: 30vw;
  border-bottom: 1px solid lightgray;
}

.bid_image{
  position: absolute;
  top: 10px;
  width: 10vw;
  height: 10vw;
  right: 10px;
  object-fit: contain;
}
5
  • ¿porqué no usas background image en el contenedor? Te asegurarías que la imagen ocupe todo el contenedor.
    – Juan
    el 13 jul. 2021 a las 9:51
  • Hola juan gracias , esque la imagen cambia según el producto que sea no es una imagen fija entonces no se como tendria que pasar las variables en css ni si se puede hacer eso.
    – luana
    el 13 jul. 2021 a las 10:05
  • Bueno creo que así lo he solucionado: .product_image{ border-top-left-radius: 5px !important; border-top-right-radius: 5px !important; overflow: hidden; height: 60vw; //border-bottom: 1px solid lightgray; object-fit: cover; }
    – luana
    el 13 jul. 2021 a las 10:37
  • Si crees que ya encontraste una respuesta a tu pregunta, escríbela como respuesta, no como comentario. Para responder, por favor, lee Cómo responder.
    – padaleiana
    el 13 jul. 2021 a las 11:37
  • ha, vale gracias
    – luana
    el 13 jul. 2021 a las 11:59

1 respuesta 1

1

Bueno creo que así lo he solucionado:

.product_image{ 
border-top-left-radius: 5px !important; 
border-top-right-radius: 5px !important; 
overflow: hidden; height: 60vw;  
object-fit: cover; 
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.