(URGENT) Help HTML and CSS Resizing Images

Hi all,

Having a problem resizing my images through CSS and can't seem to work out why.

Anyone have any idea how to fix this Problem ????

If anyone can help ASAP as I have an assignment deadline at uni tomorrow evening thanks.

As you can see in my code I have set the width and height of the images however they seem to only recognise the width and not height.

Here is an example of how it comes out.

Screen-Shot-2016-11-21-at-13.03.35.png Screen-Shot-2016-11-21-at-13.03.45.png Screen-Shot-2016-11-21-at-13.03.52.png

HTML
 <div class="iphonefeature"><img src="Assets/Asset21.png"></div>
          
        <!-- END FEATURES SECTION -->
          
          <div id="clear"></div>
       
        <!-- START DOWNLOAD SECTION -->
          
          <div id="downloadsection">
          <div id="downloadtext">
          <h1>Download the app Today!</h1>
          <div class="button3">TRY APP</div>
          <div class="button4">BUY APP</div>
          </div>
          </div>
           
          
          <!-- END DOWNLOAD SECTION -->
          
          <!-- START FOOTER SECTION -->
          <div id="footer">
          
          <h1>More Apps By Inspiro Media</h1>
          
          <div class="iapp"><img src="Assets/Asset13.png"></div>
          <div class="iapp"><img src="Assets/Asset14.png"></div>
          <div class="iapp"><img src="Assets/Asset15.png"></div>
           
              
          <p>Copywrite 2016 @ Inspiro Media Ltd.</p>
          <div class="bottomimg"><img src="Assets/Asset16.png"></div>
          <a href="#">Contact</a>
          <a href="#">Support</a>
          <div class="bottomimg"><img src="Assets/Asset17.png"></div>  
    
          </div>
          
          
          <!-- END FOOTER SECTION -->
          
          
          <!-- End Container --> 
          
   
    </body>   
    
</html>

Open in new window


CSS

.iphonefeature img {
    
    float: left; 
    width: 20px; 
    height: 20px;
    
}

/* END FEATURES */


/* START DOWNLOAD SECTION */

#downloadsection {
    background-color: #0C2633;
    height: 300px; 
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#downloadsection h1{
    margin: top: 50px;  
    text-align: center;
    margin-bottom: 35px;
    color: #1da6c4; 
    font-size: 40px; 
    text-transform: uppercase;
    font-family: 'Ek Mukta', sans-serif;
    
}

#downloadtext {
      
    width: 52%;
    display: block; 
    margin: 0 auto; 
    font-family: 'Ek Mukta', sans-serif;
    

}

.button3 {
    width:310px;
    float: left;
    padding: 10px 30px;  
    border-radius: 10px; 
    background-color: #1fb18a;
    height: 30px; 
    text-align: center; 
/*
    margin-right: 0px;
    width: 40%;
*/
    color: white;
    font-weight: bold;
    font-size: 20px;
}


.button4 {
    
    float: right; 
    width:310px;
    padding: 10px 30px;  
    border-radius: 10px; 
    background-color: #1DA6C4;
    height: 30px; 
    text-align: center; 
/*
    margin-left: 350px;
    width: 40%;
*/
    color: white;
    font-weight: bold;
    font-size: 20px;
}

/* END DOWNLOAD SECTION */

/* START FOOTER SECTION */

#footer { 

    height: 500px; 
    width: 1250;

}

.iapp img {
    
    width: 100px; 
    height: 100px; 
    display: inline; 
    
    
}

.iapp h1 {
    
    font-size: 30px; 
    text-align: center:
    
}


.bottomimg {
    
 width: 100px;
 height: 100px; 
    
}
/* END FOOTER SECTION */ 

Open in new window

Mike MooreAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
You should set either the width or the height - otherwise you are going to distort your images if they are not in the same proportion as the width and height you specify.
You can use max-width and max-height if you want to limit both so try changing your width / height to max-width / max-height.
0
 
Mike MooreAuthor Commented:
Perfect Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.