Automatically resize image an inline image in CSS

Question

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)

Andrzej Gorgoń · Accepted Answer · 2017-06-11 13:45:14Z

1

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

answered Jun 11, 2017 at 13:45

Andrzej Gorgoń

2201 silver badge8 bronze badges

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

2 Comments

bksahu Over a year ago

Thanks mate for helping me out. Could you please explain how you used flex display property to get job done ?

Andrzej Gorgoń Over a year ago

Using display flex on header evens the height of its childrens to higher one. On aside element I set align-self property to center to vertically align the image. Flex will be always high as the text in #header_title so the image has to be scaled and it will be lower than #header_title and put to the center. I recommend you this great article about flex display. Link: css-tricks.com/snippets/css/a-guide-to-flexbox.

Rachel Gallen · Accepted Answer · 2017-06-11 19:36:24Z

1

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

add the width and height to the floatingimage class OR
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

edited Jun 11, 2017 at 19:36

answered Jun 11, 2017 at 13:38

Rachel Gallen

28.7k22 gold badges77 silver badges87 bronze badges

10 Comments

bksahu Over a year ago

Could you suggest anyway in which when screen-size < 1024px the image would be inline with h1 element rather than being under the h2 element/

Rachel Gallen Over a year ago

Sorry for late reply. Was hosting guests. But this code should work better. Basically better if they are both divs, and that the widths add up to 100 (I put them to adding to 99, to be sure!) I displayed inline and set them to display at top:2%; you can adjust this as you see fit. Hope this helps. I've only tested it on my phone, I'm away from computer ( very rare!! Lol) but post a question if you have one..

Rachel Gallen Over a year ago

By the way you could add a margin-right to the photo div if you needed the image closer to the titles (or you could shorten the width of the overall header to say, 70% and set the margin to 0 auto.. that would be better..)

Rachel Gallen Over a year ago

@BatakrishnaSahu i will happily look at it for you.. but i would really prefer if you asked a new question. You can paste your code in jsfiddle,net or jsbin.com (it's free to create an account) and then you'll have lots of busy bees able to look at it.. I have limited time on my hands..

bksahu Over a year ago

Update: Got a busy bee to fix it (Yeah you were right posting question is really helpful). Anyway thanks for giving me your limted and help me out with the code and SO :-) ....(Sorry SO but can't find any other way to place to thank her)

|

Collectives™ on Stack Overflow

Automatically resize image an inline image in CSS

2 Answers 2

2 Comments

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related