Auto fit image on div

Hi experts, I wish to fit in the image on whatever the size of the div I have Designed. Any idea please?
       
<div id="navHeadb1a">
   <img src="\Logo\images.png" alt="Mountain View" style="width:258px;height:88px;">      
</div>

CS:
#navHeadb1a
    {
    height:90px;
    width:260px;
    float:left;
    position: center;
    border: 3px solid #73AD21;
   }
Whing Dela CruzAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

DmitriiconsultantCommented:
img {
    max-width: 100%;
    max-height: 100%;
}

Open in new window

0
Jim RiddlesPrepress/OMS SpecialistCommented:
As long as you know the size of your DIV, you can set a max-height and a max-width on your IMG element.  It would look like this:

HTML
<div id="navHeadb1a">
  <img src="\Logo\images.png" alt="Mountain View">
</div>

Open in new window


CSS
<style>
#navHeadb1a {
  height:90px;
  width:260px;
  float:left;
  text-align: center;
  border:3px solid #73AD21;
}
#navHeadb1a > img {
max-height:90px;
max-width:260px;
}
</style>

Open in new window


I have made a change to your CSS, changing position:center to text-align:center.  I don't believe that position is valid, but if you are trying to center the logo within your DIV, then you would use text-align:center.

Note that this will not stretch the image to fit the div, but will make sure that it will be as large as possible while maintaining proportion.

Let me know if you have any questions.
0
Leonidas DosasCommented:
And the reverse condition.Set div dimensions based image:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Expert Exchange</title>
 <style>
  #navHeadb1a
    {
    height:90px;
    width:260px;
    float:left;
    position: center;
    border: 3px solid #73AD21;
   }  
</style>  
</head>
<body>
<div id="navHeadb1a">
   <img src="https://filedb.experts-exchange.com/files/public/2017/0/25/3aa56259-d863-4a46-a4ce-b0456a54cb7a.jpeg" id="image" alt="Mountain View" style="width:258px;height:88px;">       
</div>
  <script>
   (function getDimensions(){
      var image=document.getElementById('image');
      //Get the height of the image
      var heightImage=image.style.height;
      //Get the width of the image
      var widthImage=image.style.width;
      var divElement=document.getElementById('navHeadb1a');
      //Set the height of the div based at the images height
      divElement.style.height=heightImage;
      //Set the width of the div based at the images width
      divElement.style.width=widthImage;
      
       
   })(); 
    
    </script>  
   
 
</body>
</html>

Open in new window

0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

DmitriiconsultantCommented:
Jim Riddles,
I see two obvious faults in your suggestion.
  1. doubling of the code with no real purpose
  2. duplicating of the work in the future as one would edit the dimensions in two places instead in one
0
Jim RiddlesPrepress/OMS SpecialistCommented:
Dimitri,

Thanks for your critique.  My code will work flawlessly in this instance, however I do agree that your response is the more appropriate in a situation where the enclosing DIV's size may either be unknown or change often.
0
Whing Dela CruzAuthor Commented:
Hi experts, this is the scenario of what I’m trying to achieve. In my first div I set 16% in height and 100% in width. Then within that div I created another div with 100% in height and 30% in width to make it 3 divisions. The first div I put a picture, and the second is a paragraph, and the third is also a picture.  They have different css designed. I want them to fix at any times that minimizing or reducing the page cannot affect them. I want them to remain as is. I attached the entire code to make you (experts) easy to understand. Please help. Thank you!
FixDiv.zip
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Whing Dela Cruz, will you please paste only the code for the specific div's that pertain to your question using the code box.  That way we don't have to open up a zip file and wade through what could be all your code. Or you can share a test page using your site or playground like jsfiddle.

I want them to fix at any times that minimizing or reducing the page cannot affect them. I want them to remain as is

If you have 2 images 300px wide each and the user's viewport is 400px what do you expect to happen?
0
Whing Dela CruzAuthor Commented:
Hi Scott Fell, Sorry but i do not know where's the  "code box" is located and jsfiddle not yet familiar to me. But anyway I will just paste here the code. What I'm trying to achieve here is that whatever changes to be made by the page the picture and the paragraph within the page will remain as is. When I run the code below and reduce the size of the page the picture will also reduce as well as the paragraph. Its hard to explain I hope you've got my point. Thanks!  

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Non-Resizable</title>
 <style>
  #headerX 
  {
   height: 16%;
   width: 100%;    
   position:fixed;
   top:0;
   margin:0px 0 0;
   background-color: red;
  }
  #navA
    {
    height:100;
    width:30%;
    float:left;
    //position: center;
    border: 3px solid #73AD21;
    background-color: yellow;
    text-align: center;
   }
  #navHeadb1a
    {
    height:90px;
    width:300px;
    float:left;
    position: center;
    top:0;
    border: 3px solid #73AD21;
   }
#i19
{
    width:100%;
    height:100%;
    font-size: 16px;
}

</style>  
</head>
<body>
<div id="headerX">
      <div id="navA">
         <div id="navHeadb1a">
            <img src="images.png" alt="Mountain View" style="width:100%; height:90%;"> 
         </div>
      </div>
       
      <div id="navA">
          <p id="i19">Jesus Heals a Man on the Sabbath</p>
          <p id="i19">Beyond the signs</p>
      </div>
      
      <div id="navA">
         <div id="navHeadb1a">
            <img src="images.png" alt="Mountain View" style="width:100%;height:90%;"> 
         </div>
      </div>
</div>
<div>
<p>Malalis</P>
</div>

  <script>
   (function getDimensions(){
      var image=document.getElementById('image');
      //Get the height of the image
      var heightImage=image.style.height;
      //Get the width of the image
      var widthImage=image.style.width;
      var divElement=document.getElementById('navHeadb1a');
      //Set the height of the div based at the images height
      divElement.style.height=heightImage;
      //Set the width of the div based at the images width
      divElement.style.width=widthImage;
   })(); 
    
    </script> 
</body>
</html>

Open in new window

0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I don't think you fully answered my question.

whatever changes to be made by the page the picture and the paragraph within the page will remain as is

What most developers are doing today is making the page responsive. In other words, if you view the page on a 2000px wide desktop, an 800px tablet or 400px mobile device, the page will reconfigure (through your coding skills) to give the best experience for that viewport.   This can include columns merging or moving (from the side to the top or bottom) and images changing position or size. When an image changes size, it keeps the original ratio of width to height. Sometimes an image is replaced completely.

What I think your asking is you always want the content to remain the same no matter what size the viewport or orientation.  This means if your content is 1200px wide and somebody views on a 600px wide window, the user will either have horizontal scroll bars or the content to the right becomes hidden.  Using scroll bars or not will depend on your use of the overflow property https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

To start, get rid of using percentages such as, width: 100%; and  change to using a specific width, width: 500px; or whatever width you want.  

Here I have updated your code to make the width fixed.

http://jsbin.com/jubadicomu/1/edit?html,output
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Non-Resizable</title>
 <style>
  #headerX 
  {
   height: 300px;
   width: 900px;    
   position:fixed;
   top:0;
   margin:0px 0 0;
   background-color: red;
  }
  .navA
    {
    height:100px;
    width:280px;
    margin-left:10px;  
    float:left;
    border: 3px solid #73AD21;
    background-color: yellow;
    text-align: center;
   }
  .navHeadb1a
    {
    height:90px;
    border: 3px solid #73AD21;
   }
.i19
{
 
    font-size: 16px;
}

</style>  
</head>
<body>
<div id="headerX">
      <div class="navA">
         <div class="navHeadb1a">
            <img src="images.png" alt="Mountain View" style="width:100%; height:90%;"> 
         </div>
      </div>
       
      <div class="navA">
          <p class="i19">Jesus Heals a Man on the Sabbath</p>
          <p class="i19">Beyond the signs</p>
      </div>
      
      <div class="navA">
         <div class="navHeadb1a">
            <img src="images.png" alt="Mountain View" style="width:100%;height:90%;"> 
         </div>
      </div>
</div>
<div>
<p>Malalis</P>
</div>


</body>
</html>

Open in new window


Please note some important changes:

The ID attribute should be unique.
You have used the same id  multiple times such as <div id="navA">.  In this case, your navA should be a class.
https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute
https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#classes

When applying styles to html elements, apply to a class rather than an ID.
Assume you have code below and you want to apply green text to the 3 div's.  You would have to create a css style for each id.
<div id="navA">stuff</div>
<div id="navB">stuff</div>
<div id="navC">stuff</div>

Open in new window

Instead, add a class and now you can create one css style for the class, "abc".
<div id="navA" class="abc">stuff</div>
<div id="navB" class="abc">stuff</div>
<div id="navC" class="abc">stuff</div>

Open in new window


Format your images in your photo editing software to the dimensions you will use on your page.
Avoid using css or inline styles to size your images where possible like this, style="width:100%; height:90%;.  It distorts your image and places the burden of size calculation on the browser which can slow down the page load speed.
2

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Whing Dela CruzAuthor Commented:
Hi scott Fell, Thank you so much for that very important information. I've learned a lot from your post.
1
Jim RiddlesPrepress/OMS SpecialistCommented:
Scott's answer is very concise, and explains faults in the OP's code.  Dmitrii's answer is correct, but I feel that Scott's additional information is more complete.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
div

From novice to tech pro — start learning today.