html - why img is not taking full width of parent?

Question

.landing{
        position: inherit;
        width: 100%;
        height: 80vh;
        z-index: 0;
    }
    
    .landing  .wrapper + img{
        width: 100%;
    }

<div class="landing"> 
  <div class="wrapper"> 
    <img src="http://lorempixel.com/350/100/" alt="Our Building">
    <img src="http://lorempixel.com/350/100/" alt="LOGO"> 
  </div> 
</div>

All i want is that image should take full with of its parent , please help me out . Thanks in advance

标签： htmlcss

Answer 1

You can use first-child element:

.landing{
    position: inherit;
    width: 100%;
    height: 80vh;
    z-index: 0;
}

.landing .wrapper img:first-child {
    width: 100%;
}

<div class="landing">
    <div class="wrapper">
        <img src="https://via.placeholder.com/350x100" alt="Our Building">
        <img src="https://via.placeholder.com/350x100" alt="LOGO">
    </div>
</div>