Show full image in certain height of div

Question

Hello i want to show the full image in a specified height div and set it a a background to the div. What i ve tried so far crops the image and doesnt show the full height of the image. Any help?

HTML:

 <div *ngIf="item.type==='P'"   [ngStyle]="{'background-image': 'url(' + item.image_path + ')','background-repeat':'no-repeat',
  'height':'400px','width':'100%','border-bottom-left-radius': '5px','border-bottom-right-radius': '10px'}">
    <ion-row>
      <ion-col col-4>
        <div>
          Some text
        </div>
      </ion-col>
      <ion-col col-8>
          <button ion-button round outline>
            some button
          </button>
      </ion-col>
    </ion-row><br>
    <span style="background:none;float: left">
      <button ion-button outline round padding color="light">
        <h1>name</h1>
      </button>
    </span>
  </div>

"Specified height div" did you mean specified width? the div only has a width specified (400px) — he77kat_, Oct 13 '19 at 05:20
I think this might help you out: https://stackoverflow.com/questions/3751565/css-100-width-or-height-while-keeping-aspect-ratio — David, Oct 13 '19 at 05:21

Shahjahan · Accepted Answer · 2019-10-13T08:51:22.177

0

Check this out, you need to specify your size into your image tag

.image{
            background: url('https://images.pexels.com/photos/219998/pexels-photo-219998.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
            height: 250px;
            width: 100%;
            background-repeat: round;
        }

<div class="image">
        
</div>

edited Oct 13 '19 at 08:51

answered Oct 13 '19 at 05:23

Shahjahan

532
5
12

Thanks Shahjaham thats was the answer but i want to set i as a background ttoo. – SimonIoa Oct 13 '19 at 06:01
In the height and width section, set your desired dimension. And if this is solution of your problem plz mark it – Shahjahan Oct 13 '19 at 08:52

score 0 · Answer 2 · answered Oct 13 '19 at 08:48

0

ok, it just needed a background-size: 200px 100px;

answered Oct 13 '19 at 08:48

SimonIoa

117
11

Show full image in certain height of div

2 Answers2