CODEWITHSUNDEEP
htmlcss
Tristan Lauzon
Tristan Lauzon

Reputation: 3

resizing of a specific image in css

Does anyone know how to resize a single image file in an HTML document using CSS?

I have two images in my code and when i call on the img i want to resize i am unable to resize only the one i end up resizing both

header {
    background-color:lawngreen;
}
body {
    background-image: url(mountaindew.png);
    background-repeat:no-repeat;
}
.dropdown {
    position: center;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-image:url(mountaindewb.png);
    background-repeat:no-repeat;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display:block;
}

span img {
    height: 25px;
    width: 25px;
}

a {
    display: list-item;
    border: inset;
}

body img {
    height:250px;
    width:250px;
}
<header>
    <link rel="stylesheet" type="text/css" href="styles/styles.css">
    <title>DO THE DEW MTN.DEW</title>
    <p>Mountain Dew Flavor central</p>
    <div class="dropdown">
        <span><img src="photos/Hamburger_icon.svg.png"></span>
        <div class="dropdown-content">

            10 of the 152 mtn dew flavors


            <a href="mtndew1.html"><button>Mountaindew flavor 1</button></a>


            <a href="mtndew2.html"><button>mountaindew flavor 2</button></a>


            <a href="mtndew3.html"><button>mountaindew flavor 3</button></a>


            <a href="mtndew4.html"><button>mountaindew flavor 4</button></a>


            <a href="mtndew5.html"><button>Mountaindew flavor 5</button></a>


            <a href="mtndew6.html"><button>Mountaindew flavor 6</button></a>


            <a href="mtndew7.html"><button>Mountaindew flavor 7</button></a>


            <a href="mtndew8.html"><button>Mountaindew flavor 8</button></a>


            <a href="mountain dew homepage.html "><button>home</button></a>


            <a href="mtndew10.html "><button>Mountaindew flavor 10</button></a>
        </div>
    </div>
</header>

<body>
    <p>the ninth flavor is Mountain Dew Game Fuel (Citrus Cherry) which was made in 2009</p>
    <img src="photos/mtndewgb.png" />
</body>

I want to resize only the second image inside <body>.

Upvotes: 0

Views: 959

Answers (4)

ShivCK
ShivCK

Reputation: 659

You need to uniquely identify that particular element (img or whatever) to change it's style.

For this purpose you can do any one these things -

  • Add any id to that particular element and use id selector in css.
  • Use nth-child selector in css if your element's position in the file is fixed
  • Use style attribute inside the element (may not be the best idea)

Correct your HTML

Read about proper structure of a html file. Resources -

Upvotes: 1

simmer
simmer

Reputation: 2711

There's one big issue with your HTML to start: <header> is an HTML5 tag that goes inside <body>, and it appears you've confused it with <head>, which comes before <body> in an HTML document. All content visible on the page must be inside <body></body>, so all <img /> tags must also be inside <body></body>, and that's why your body img { ... } CSS selector isn't working as you expect.

To solve your problem of targeting only one of the two images, you can apply a class attribute to the <img /> tag that you wish to resize, and then write CSS to target only an image with that classname.

Here's a snippet with corrected HTML structure and a classname of resize applied to your image:

header {
    background-color:lawngreen;
}
body {
    background-image: url(mountaindew.png);
    background-repeat:no-repeat;
}
.dropdown {
    position: center;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-image:url(mountaindewb.png);
    background-repeat:no-repeat;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display:block;
}

span img {
    height: 25px;
    width: 25px;
}

a {
    display: list-item;
    border: inset;
}

img.resize {
    height: 250px;
    width: 250px;
}
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles/styles.css">
    <title>DO THE DEW MTN.DEW</title>
  </head>
  
  <body>
    <header>
      <p>Mountain Dew Flavor central</p>
      <div class="dropdown">
        <span><img src="photos/Hamburger_icon.svg.png"></span>
        <div class="dropdown-content">

          10 of the 152 mtn dew flavors


          <a href="mtndew1.html"><button>Mountaindew flavor 1</button></a>


          <a href="mtndew2.html"><button>mountaindew flavor 2</button></a>


          <a href="mtndew3.html"><button>mountaindew flavor 3</button></a>


          <a href="mtndew4.html"><button>mountaindew flavor 4</button></a>


          <a href="mtndew5.html"><button>Mountaindew flavor 5</button></a>


          <a href="mtndew6.html"><button>Mountaindew flavor 6</button></a>


          <a href="mtndew7.html"><button>Mountaindew flavor 7</button></a>


          <a href="mtndew8.html"><button>Mountaindew flavor 8</button></a>


          <a href="mountain dew homepage.html "><button>home</button></a>


          <a href="mtndew10.html "><button>Mountaindew flavor 10</button></a>
        </div>
      </div>
    </header>

    <main>
      <p>the ninth flavor is Mountain Dew Game Fuel (Citrus Cherry) which was made in 2009</p>
      <img src="photos/mtndewgb.png" class="resize" />
    </main>
  </body>
</html>

Upvotes: 0

mcilhaggis
mcilhaggis

Reputation: 55

Give the image you want to resize an id(#mtndew) and use that to reference the specific image your trying to target in the CSS file instead of using a class which is typically more general.

Upvotes: 0

Ralph
Ralph

Reputation: 337

Add a class to the image you want to resize

<img src="image.png" class="resize">

and in your css:

.resize {
    width: 100px;
}

Upvotes: 0

Related Questions