We help IT Professionals succeed at work.

Auto fit image on div

Whing Dela Cruz
on
225 Views
Last Modified: 2017-04-18
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;
   }
Comment
Watch Question

Dmitriiconsultant
CERTIFIED EXPERT
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
Jim RiddlesPrepress/OMS Specialist
CERTIFIED EXPERT

Commented:
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.
CERTIFIED EXPERT
Distinguished Expert 2017

Commented:
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

Dmitriiconsultant
CERTIFIED EXPERT

Commented:
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
Jim RiddlesPrepress/OMS Specialist
CERTIFIED EXPERT

Commented:
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.

Author

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
Scott FellDeveloper
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013

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

Author

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

Developer
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Author

Commented:
Hi scott Fell, Thank you so much for that very important information. I've learned a lot from your post.
Jim RiddlesPrepress/OMS Specialist
CERTIFIED EXPERT

Commented:
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.