0

This code work correctly except the uploaded image I want it to have a specific width & height even if the image is large or small , the size should be the same for all of them .

What can I do for this? ==> CSS

.StyleHeader{
    color: white;
    background-color: white;
}

.titlePosition2{
    color: red;
    font-size: 160%;  
    margin-top: -12%;
    margin-left: 8%;
  
    
}


.slds-page-header{
    background-color: white;

}


.styleStatut{
    margin-top: 0.5%;
    margin-left: -5%;
}

.position1{
    color: black;
    font-size: 160%;
    margin-top: -12%;
    margin-left: 8%;
    /* position: absolute; */
  
}
.StyleAdress{
    color: rgba(0, 153, 255, 0.973);
    font-size: 120%;
    margin-top: 15%;

    
}

HTML :


<template>
    <lightning-card>
        <div class="slds-page-header">
            <div class="slds-page-header__row">

                <template if:true={MyObject.data}>
                            
                        <div class="slds-grid slds-gutters">

                            <div class="slds-col ">
                                <span>
                                    <span class="slds-m-around_medium styleStatut">
                                        <img style="     width: 40%;
                                          margin-top: 12%; " src={statut_icon}   >
                                    </span>
                                </span>
                                </div>

                            <div class="slds-col">
                                
                                <div><br>
                                    <div class="position1">
                                    <div>
                                        <h1><strong>{Name}</strong></h1>
                                    </div><br><br></div>
                                    <div class="position1">
                                    <div>
                                        <h1><strong>{Formula__c}</strong></h1>
                                    </div><br><br></div>
                                    <div class="titlePosition2">
                                    <div>
                                      <h1><strong>{Type__c}</strong></h1>  
                                    </div>
                                </div>
                               
                            </div>
                            </div>
        

                            <div class="slds-col">
                            <span>
                                <lightning-spinner if:true={isLoading} alternative-text="Loading" size="small"> </lightning-spinner>
                                                                                    
                                <template if:true={imageurl}>
                                                <img src={imageurl} style=" 

                                                width: 140%;
                                                height: 100%; 
                                               
                                                "/>
                                </template>    
                            </span>
                            </div>

                            <div class="slds-col">
                                <span>
                            <div style="margin-top: 70%; " >
                                <lightning-file-upload  name="fileUploader"  accept={acceptedFormats} record-id={recordId} onuploadfinished={handleUploadFinished} onchange={saveFile} disabled={disableImport}>
                                </lightning-file-upload>
                            </div>
                                <div>
                                    <template if:true={fileName}>
                                            {fileName} &nbsp; &nbsp; 
                                    </template>
                                </div>
                            
                                </span>
                        </div>
                            <div class="slds-col">
                            <span style="height: 50%;  width: 50% ">
                                <lightning-map 
                                map-markers={mapMarkers}
                                zoom-level={zoomLevel}
                                center={center}
                                onmarkerselect={handleMarkerSelect}
                                selected-marker-value={selectedMarkerValue}
                            >
                            </lightning-map>
                            </span>
                            </div>
                          
                            
                            <div class="slds-col">
                            <span>
                                <div class="StyleAdress">
                                    <p >{Country}</p><br>
                                    <p>{City}</p><br>
                                    <p>{Street}</p>
                                </div>
                            </span>
                            </div>
                            </div>



                </template>
        </div>
        </div>
    </lightning-card>
</template>






1 Answer 1

0

I would rather use width and height attributes then write it as styles

<img src={imageurl} width="100%" height="100%">
1
  • I Used <div style="max-width:82%;"> <img style="max-width:80%;max-height:80%;" src ={imageurl} > </div> but the problem is when I reduce the page the image also begin small Apr 28, 2022 at 9:22

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .