Adjust the size of the logo picture

Question

Adjust the size of the logo picture

Hey there, I have a question that may seem a bit silly, but I'm just starting out with coding.

I'm trying to resize and center my logo image (which is currently taking up the whole page in preview), but no matter what I try with CSS, nothing seems to work. What am I missing??

So far, in my HTML file, I only have the following:

<div class="header">
<img class="logo" src="images/logo.png" alt="\Stuff logo">
</div>

And in my CSS file, I've tried these lines:

body {
  margin: 0 auto;
}

.logo {
  max-width: 20%;
  max-height: 20%;
}

html css image resize

Answer 1

Answer №1

img{
     display:block;
     margin:0 auto;
     width:10%;
 }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="header">
       <img src="https://images.unsplash.com/photo-1575881875475-31023242e3f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="">
  
     
    </div>
  </body>
</html>

Answer 2

img{
     display:block;
     margin:0 auto;
     width:10%;
 }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="header">
       <img src="https://images.unsplash.com/photo-1575881875475-31023242e3f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="">
  
     
    </div>
  </body>
</html>

Adjust the size of the logo picture

Answer №1

Similar questions

Make sure to consistently show the rating bubble within the md-slider

The issue of background-attachment: fixed not functioning properly on Safari

Foundation 4 - image hover effect to display alternate image

Issue with radio button not updating when selected

Display the div only after all images have finished loading in response to the AJAX call

Using JQuery's .mouseover and .mouseout methods to modify font colors on a webpage

Tips on positioning divs in a vertical layout with CSS

What is the functionality of this pseudo element?

The .remove() method is ineffective when used within an Ajax success function

Using Vue.js to update the v-bind:style when the mouse hovers over the element

Issues with div and hyperlinks/forms

What is the method for integrating an element into a different flow using the position property?

Only one file being uploaded

Issue with Bootstrap navbar not expanding on mobile devices

What is the best way to insert a hint into an asp:textbox?

What is the proper way to utilize the name, ref, and defaultValue parameters in a select-option element in React Meteor?

Is there a way to change the font size with a click in JavaScript or Angular?

Steps for highlighting specific character(s) within a textarea

Layering numerous backgrounds (Regular, Expanded, Regular) atop one another

What is the best way to ensure that the video width is fully responsive at 100%?