0

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>
georgeawg
  • 48,608
  • 13
  • 72
  • 95
  • "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

2 Answers2

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>
Shahjahan
  • 542
  • 5
  • 12
  • Thanks Shahjaham thats was the answer but i want to set i as a background ttoo. –  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
0

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