CODEWITHSUNDEEP
htmlcss
bksahu
bksahu

Reputation: 220

Automatically resize image an inline image in CSS

I want my inline images to automatically resize with browser size and at the same time it should be inline with the header too. I have already tried solution given here but it is not working for me.

Here is my code: 

#header_title {
  font-weight: bolder;
  text-align: center;
}

#header_photo {
  display: none;
}

.floatingimage {
  float: right;
  max-width: 100%;
  height: auto;
}

@media all and (max-width: 1024px) {
  #header_title {
    margin-left: 10%;
    min-width: 67%;
    max-width: 77%;
    display: inline-block;
    vertical-align: top;
    position: relative;
  }
  #header_photo {
    display: inline-block;
    vertical-align: top;
    max-width: 20%;
    height: auto;
  }
}
<header>
  <div id="header_title">
    <h1>Title h1</h1>
    <h3>Title h3</h3>
  </div>
  <aside id="header_photo">
    <img class="floatingimage" src="http://www.planwallpaper.com/static/images/Awesome-Nature-Background.jpg" width="100px" height="100px" />
  </aside>
</header>

You find this code on jsfiddle here.

NOTE: I am using Firefox 53.0.3(32-bit)

Upvotes: 2

Views: 7165

Answers (2)

Rachel Gallen
Rachel Gallen

Reputation: 28573

You have sized the image using inline-styling; that is the main problem. You can do two 2 things:

  1. add the width and height to the floatingimage class OR
  2. create a new class e.g. .wh100, with width:100px; and height:100px; and use a second class with the .floatingimage in your html e.g img class="floatingimage wh100"

In either option, remember to REMOVE the inline styling from the html!!

Then your images should size appropriately.

Give that a whirl

RE-EDIT: (back on computer - sigh..).. here you go.. the fiddle i posted a while ago with the header narrowed to 75%.

header {
  width: 75%;
  height: auto;
  margin: 0 auto;
  padding: 0;
}

#header_title {
  font-weight: bolder;
  text-align: center;
  max-width: 80%;
}

#header_photo {
  /*display: none;*/
  margin: 0;
  padding: 0;
  max-width: 20%;
  height: auto;
  float: right;
}

.floatingimage {
  position: relative;
  display: none;
}

.wh100 {
  width: 100px;
  height: 100px;
}

@media all and (max-width:480px){
  #header_photo {
    margin-top: 8%!important;
}
}

@media all and (max-width:1024px) {
  #header_title,
  #header_photo img {
    margin: 0;
    padding: 0;
    top: 2%;
    display: inline!important;
    vertical-align: middle!important;
  }
  #header_title {
    max-width: 80%;
    position: relative;
    float: left;
  }
  #header_photo {
    margin-top: 4%;
    max-width: 20%;
    position: relative;
    float: right;
  }
  #header_photo img {
    position: relative;
    max-width: 100%;
    height: auto;
  }
}
<header>
  <div id="header_title">
    <h1>Title h1</h1>
    <h3>Title h3</h3>
  </div>
  <aside id="header_photo">
    <img class="floatingimage wh100" src="http://www.planwallpaper.com/static/images/Awesome-Nature-Background.jpg" />
  </aside>
</header>

New fiddle

Upvotes: 1

Andrzej Gorgoń
Andrzej Gorgoń

Reputation: 220

I slightly modified your HTML and CSS. I add flex display and image height related to width.

HTML code:

<header>
    <div id="header_title">
            <h1>Title h1</h1>
            <h3>Title h3</h3>
    </div>
            <aside id="header_photo">
                <img class="floatingimage" src="http://www.planwallpaper.com/static/images/Awesome-Nature-Background.jpg"/>
            </aside>

CSS code:

header {
  display: flex;
}

#header_title
{
  font-weight: bolder;
  text-align: center;
}

#header_photo
{
  display: none;
  max-width: 100%;
  height: auto;
  align-self: center;
}

#header_photo img {
  width: 100%;
  height: auto;
  max-height: 120px;
}

.floatingimage
{
  float: right;
}

@media all and (max-width: 1024px)
{
 #header_title
 {
    margin-left: 10%;
    min-width: 67%;
    max-width: 77%;
    display: inline-block;
    vertical-align: top;
    position: relative;
 }

  #header_photo
  {
    display: inline-block;
    vertical-align: top;
    max-width: 20%;
    height: auto;
  }
 }

You check it on fiddle here

Upvotes: 1

Related Questions