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;
}