Link to home
Start Free TrialLog in
Avatar of Whing Dela Cruz
Whing Dela CruzFlag for Anguilla

asked on

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;
   }
SOLUTION
Avatar of Dmitrii
Dmitrii
Flag of Russian Federation image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
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

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
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.
Avatar of Whing Dela Cruz

ASKER

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
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?
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

ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hi scott Fell, Thank you so much for that very important information. I've learned a lot from your post.
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.