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)

Rachel Gallen · Answer 1 · 2017-06-11T19:36:24.457

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 '17 at 19:36

answered Jun 11 '17 at 13:38

Rachel Gallen

27,943
21
72
81

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/ – bksahu Jun 11 '17 at 16:37
1

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 Jun 11 '17 at 19:05
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 Jun 11 '17 at 19:16
Thanks that works. But my main code is still messed up and it doesn't work as expected. :-( – bksahu Jun 12 '17 at 04:53
Post another question! The elves await ;) – Rachel Gallen Jun 12 '17 at 04:55
:-D Or could you please take a look at the code ? I have hosted it here - https://github.com/bksahu/sheldon-cooper-obsession/tree/master/src/responsive-design%20 . PS: Get ready to see an awful piece code – bksahu Jun 12 '17 at 08:49
1

@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.. – Rachel Gallen Jun 12 '17 at 08:54
@BatakrishnaSahu i fixed your code (I note that you didn't apply any of yesterdays changes!) If you post a question I'll post an answer. – Rachel Gallen Jun 12 '17 at 10:40
Sorry for late reply. Was sleeping. Thank you using your using your genius brain and for fixing my code (I have applied your code but locally...I will push it soon). Here goes you question https://stackoverflow.com/questions/44505447/automatically-resize-header-in-css-which-is-inline-with-an-image . – bksahu Jun 12 '17 at 17:37
1

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) – bksahu Jun 12 '17 at 18:05

score 1 · Accepted Answer · answered Jun 11 '17 at 13:45

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

Thanks mate for helping me out. Could you please explain how you used flex display property to get job done ? — bksahu, Jun 11 '17 at 14:44
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: https://css-tricks.com/snippets/css/a-guide-to-flexbox/. — Andrzej Gorgoń, Jun 11 '17 at 16:29

Automatically resize image an inline image in CSS

2 Answers2