Avatar of Whing Dela Cruz
Whing Dela Cruz
Flag 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;
   }
* divCSSJavaScriptHTML

Avatar of undefined
Last Comment
Jim Riddles

8/22/2022 - Mon
SOLUTION
Dmitrii

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Jim Riddles

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.
Leonidas Dosas

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

Dmitrii

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
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Jim Riddles

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.
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
Scott Fell

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?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Whing Dela Cruz

ASKER
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
Scott Fell

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Whing Dela Cruz

ASKER
Hi scott Fell, Thank you so much for that very important information. I've learned a lot from your post.
Jim Riddles

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.
Your help has saved me hundreds of hours of internet surfing.
fblack61