Attempting to resize img with CSS, not responding to any size attributes

Question

I don't have a web development background, but have a small business client who has me doing other things who got me working on their web site. I've designed a home page, more or less ready for me to turn it into a template in whatever CMS we decide to use.

It was going great until I started replacing blank divs with images. Now that I'm putting in the proxy images, everything is breaking down.

The primary issue is that the CSS attributes are not resizing the image, but the image at full size would be acceptable if the rest of the body actually flowed in such a way that the image wasn't covering it when rendered.

So far, I've tried adding height and with attributes to the img tag equal to both the actual height of the image and the height I'd like it to be. (310px for the desktop width.)

I've also tried nesting the image inside a div inside the section and applying widths there. I ended up with other problems, I assume from the shortcuts I took in the CSS, but even after changing how I was designating the description, it still was not resizing and the overflow was not being hidden.

Here's a JSFiddle.

The current HTML:

  <body>
    <header id="page-head" class="clearfix">
      <div id="logo">Logo</div>
      <h1>Academic Tours and Travel</h1>
      <nav>
        <ul class="clearfix">
          <li><a href="#"><div>Travel With Us</div></a></li>
          <li><a href="#"><div>Sign In</div></a></li>
        </ul>
      </nav>
    </header>
    <section id="feature">
      <img src="https://i.imgur.com/CG8cppD.jpg">
      <div>
      <h1>Malta-Sicily Delight</h1>    
      <p>Our star tour. Visit Malta and Sicily with our hand crafted tours.</p>
      </div>
    </section>
    <div id="content-wrap" class="clearfix">
      <div id="right-wrap" class="clearfix">
        <section id="about">
          <header><h2>About</h2></header>
          <p>Founded in 1984, Academic Tours and Travel is a leading specialist in travel to Malta and Sicily. They also are home to experts in many European destinations including Italy and Romania.</p>
        </section>
        <section id="pledge">
          <header><h2>Our Pledge</h2></header>
          <p><em>"From Concept to Completion"</em></p>
          <p>Our agents will work with you from the first idea until you pick you unpack. If we ever recieve complaints from a local provider they are investigated and blacklisted for at least a year.</p>
        </section>
        <a href="">
        <div id="call" class="clear">
          <h1>Browse our Destinations</h1>
        </div>
        </a>
      </div>
      <section id="contact">
        <header><h2>Contact an Agent</h2></header>
        <form>
          <label>Name: <input type="text" name="name" placeholder="Jane Doe" required="true" /></label><br />
          <label>Email: <input type="text" name="email" placeholder="[email protected]" required="true" /></label><br />
          <label>What's your dream vacation? <textarea name="destination" placeholder="Sample text" required></textarea></label><br />
          <button type="submit">Send</button>
          <button type="reset">Reset</button>
        </form>
      </section>
    </div>
  </body>

Current CSS:

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* border: 1px solid black; */
 }

html {
  height: 100%;
}

a {
  text-decoration: none;
}

body {
  font-size: 62.5%;
  margin: auto;
  height: 600px;
  font-family: Geneva, Tahoma, Verdana, sans-serif;
}

button {
  width: 47%;
  margin-right: 5%;
  display: inline-block;
}

button:last-child {
  margin-right: 0;
}

h1 {
  font-size: 2.1em;
  text-align: center;
  color: #c2d22d;
}

h2 {
  font-size: 1.6em;
  text-align: center;
  color: #c2d22d;
}

header {
  background-color: #134313;
}

input {
  width: 100%;
}

img {
  height: 100px;
}

label {
  font-size: 1.2em;
}

nav ul {
  min-width: 350px;
  position: relative;
}

nav li {
  display: inline;
  list-style: none;
  text-align: center;
  padding-top: 12px;
  width: 25%;
  min-width: 60px;
  background-color: #B3DFB3;
  position: absolute;
  height: 40px;
  font-size: 1.3333em;
  border-radius: 5px;
}

nav li:hover {
  background-color: #A4B4C7;
}

nav li:first-child {
  left: 20%;
}
nav li:last-child {
  right: 20%;
}

nav li a {
  text-decoration: none;
  color: #010A01;
}

nav li a div {
  height: 100%;
  width: 100%;
}

p {
  font-size: 1.2em;
}

section p {
  padding: 0 10px;
}

textarea {
  width: 100%;
}

#page-head {
  width: 100%;
  height: 120px;
}

#call {
  min-height: 60px;
}

#call:hover {
  background-color: #A4B4C7;
}

#call h1 {
  color: #134313;
  padding: 15px;
}

#content-wrap {
  background-color:#E0FEE0;
}

#logo {
  display: none;
}

#feature {
  clear: both;
  position: relative;
}

#feature div {
  width: 77.5%;
  margin: auto;
  position: absolute;
  left: 11.25%;
  bottom: 3.8461%;
}


@media screen and (min-width: 425px) {
  #about {
    margin-right: 5%;
  }

  #about, #pledge {
    width: 47.5%;
    float: left;
  }

  #call {
    font-size: 1.3333em;
  }

}

@media screen and min-width: 600px) {
  #page-head h1 {
    max-width: 100%;
    text-align: left;
    float: left;
  }

  #page-head nav {
    max-width: 60%;
    float: right;
  }
}

@media screen and (min-width: 740px) {

  body {
    max-width: 960px;
  }

  button {
    width: 46%;
  }

  /* IDs for specific features. */
  #contact {
    width: 30%;
  }

  #content-wrap {
    width: 100%;
    min-height: 250px;
  }

  #feature {
    min-height: 310px;
    width: 83.3333%;
    margin: auto;
    position: relative;
  }

  #logo {
    display: block;
  }

  #page-head {
    height: 60px;
  }
  #page-head > * {
    float: left;
  }

  #page-head > nav {
    float: right;
  }

  #right-wrap {
    width: 65%;
    height: 100%;
    float: right;
  }


}

/* Utility classes. */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clear {
  clear: both;
}

You have img set to 100px in your CSS, but then you have a more specific selector of #feature img setting the height to 100%. Which one do you want? The #feature img is winning right now. Delete that second bit and it should do what you want. — TylerH
– TylerH, Commented Jun 5, 2014 at 20:01
Right now, neither. I'm trying to get it to change. I just removed the #feature img selector completely and the image is still not changed. — pathunstrom
– pathunstrom, Commented Jun 5, 2014 at 20:04
I forgot that you have a relative image path so I can't see your image. Do you want the image to be on the green header? Or below it? — TylerH
– TylerH, Commented Jun 5, 2014 at 20:06
It should take up the space between the header and the content wrapper. It can be up to the full width of the page. I will see if I can modify the image source to use an online source. — pathunstrom
– pathunstrom, Commented Jun 5, 2014 at 20:07
Can you upload the image to imgur or something so we can see it in its true size and how it's affecting the layout? It sounds like it is a background image, so you should add background-img to #feature in your CSS. (Only use HTML <img> tags when the image is part of your semantic content) — TylerH
– TylerH, Commented Jun 5, 2014 at 20:11

Alen Saqe · Accepted Answer · 2014-06-06 00:26:13Z

1

Try setting

Img{ width:100%}

And then edit the height of the section #feature to the height you want it to be. The image will fill the the width of the section.

answered Jun 6, 2014 at 0:26

Alen Saqe

4797 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Attempting to resize img with CSS, not responding to any size attributes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related