none
Allow Image to Fill <div> Regardless of Aspect Ratio

    질문

  • I need to get an image to fill a <div></div> tag. I DON"T want to maintain the aspect ratio. In my master page I have the following:

    <td>
        <asp:ContentPlaceHolder id="PlaceHolderBodyLeftBorder" runat="server">
            <div class="ms-pagemargin">
    	    <IMG SRC="/_layouts/images/blank.gif" width="10px" height="729px"  alt=""/>
    	</div>
        </asp:ContentPlaceHolder>
    </td>

    In the aspx page I have the following:

    <asp:Content ContentPlaceHolderId="PlaceHolderBodyLeftBorder" runat="server">
        <div class='ms-areaseparatorleft'>
    	<img src="/_layouts/images/blank.gif" alt="" />
        </div>
    </asp:Content>

    I have a css file that replaces the blank gif:

    div.ms-areaseparatorleft{
    background:#83b0ec url("/_layouts/images/navshape.jpg");
    background-repeat:no-repeat;
    background-position:-143px 0px;
    border-right:1px solid #6f9dd9;
    width:10px;
    }
    

    My div is the border between the Quick Launch navigation and the main page data (PlaceHolderMain).

    The issue with defining a specific size is that as I add/remove items from the Quick Launch the code needs to be changed to fill the space. Is there a way to get the image to fill the div automatically?

    2018년 5월 10일 목요일 오전 11:32

모든 응답

  • Hi Whalensdad,

    Add the CSS Style width to 100% and display mode as block to fill the image within the specific div, here is the demo for your reference:

     div.ms-areaseparatorleft{
    background:#83b0ec url("/_layouts/images/navshape.jpg");
    background-repeat:no-repeat;
    background-position:-143px 0px;
    border-right:1px solid #6f9dd9;
    width:10px;
    height:200px;
    }
        .ms-areaseparatorleft img{
    	width:100%;
    	display:block;
    }
        

    Render looks like this:

    More information here:

    How to fill div with image

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    2018년 5월 11일 금요일 오전 7:59
  • This isn't working for me.

    1. The image is displaying at 200px in height based on the div.ms-areaseparatorleft

    2. If I remove the 200px, it displays like my original post

    3. I've tried putting the display:block; into the div.ms-areaseparatorleft, to no effect

    4. Your image example shows a duplicate of the image. What is supposed to happen is that the div background is supposed to be blue with the image displaying at it's full height width a width of 10px (background:#83b0ec url("/_layouts/images/navshape.jpg");)

    After playing with this for a few more minutes it appears it is the DIV height that I need to be at the full height of the column. I removed the image portion of the background and the div is only showing as a little box (like the image on the left)

    div.ms-areaseparatorleft{
    background:#83b0ec;
    background-repeat:no-repeat;
    background-position:-143px 0px;
    border-right:1px solid #6f9dd9;
    width:10px;
    
    }
    

    The Master page placeholder 

    <asp:ContentPlaceHolder id="PlaceHolderBodyLeftBorder" runat="server">
      <div class="ms-pagemargin">
        <IMG SRC="/_layouts/images/blank.gif" width="10px" height="729px" alt=""/>
      </div>
    </asp:ContentPlaceHolder>

    has this css

    .ms-pagemargin{
    background-color:#83b0ec;
    background-image:url("/_layouts/images/navshape.jpg");
    background-repeat:no-repeat;
    height:100%;
    }
    td.ms-rightareacell div.ms-pagemargin{
    background-color:#83b0ec;
    background-image:url("/_layouts/images/pagebackgrad.gif");
    background-repeat:repeat-x;
    height:100%;
    border-left:solid 1px #83b0ec;
    }
    

    The rendering page inserts the ms-areaseparatorleft div and css. o it appears it is a div within a div.

     
    • 편집됨 Whalensdad 2018년 5월 11일 금요일 오전 11:52
    2018년 5월 11일 금요일 오전 11:12
  • Hi Whalensdad,

    Please set a specific width and height for the image container, and set image width and height to 100%, it will fill up the div container, if not set the container div size, the image will show its original size with 10x10 in this situation:

    <style type="text/css">
    
    div.ms-areaseparatorleft{
    background:#83b0ec url("/_layouts/images/navshape.jpg");
    background-repeat:no-repeat;
    background-position:-143px 0px;
    border-right:1px solid #6f9dd9;
    width:10px;
    height:729px;
    }
       .ms-areaseparatorleft img{
    	width:100%;
    	height:100%;
    }
    </style>
     <div class='ms-areaseparatorleft'>
    	<img src="/_layouts/images/blank.gif" alt="" />
        </div>
    

    About the duplicated item, this is my mistake in the code snippet, I added a duplicated image, here is the render picture now:

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    2018년 5월 11일 금요일 오전 11:51
  • Hi Whalensdad,

    I am checking to see how things are going there on this issue. Please let us know if you would like further assistance.

     

    You can mark the helpful post as answer to help other community members find the helpful information quickly.

     

    Thanks

     

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    2018년 5월 18일 금요일 오후 2:02
  • I'm still unable to get this to display properly. It's not that the image size is wrong, the DIV size only increases to the size of the image. So unless I give the image a specific size, the DIV is small, hence a small image. Does this make sense?
    2018년 5월 22일 화요일 오후 2:33
  • Hi,

    Div is a container which to place image, if not set the width and height to the div, then it will have the default size as image width and height, if the image is small like in this thread, then the div will also small. This should be your concern.

    So this is necessary to specify a width and height to the div, then set width, height:100% for the image in CSS to fill div with image.

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    2018년 5월 23일 수요일 오전 9:31
  • Let me check this out and see if it fixes my issue. I'm not sure that it will. My concern is that the height is tied to how many items are in the quick launch navigation section. The width and height work for the current items in the list. I just don't want to have to go in and code new width/height values every time an item changes the size of the quick launch navigation.
    2018년 5월 23일 수요일 오후 8:04
  • Hi Whalensdad,

    You could get the quick launch height via Jquery dynamically and then set this value to the Css Style like below:

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() 
    {
          var testheigt=$("#zz15_V4QuickLaunchMenu").height();
          $(".ms-areaseparatorleft").height(testheigt);   
     });
     
     </script>
    <style type="text/css">
    
    div.ms-areaseparatorleft{
    background:#83b0ec url("/_layouts/images/navshape.jpg");
    background-repeat:no-repeat;
    background-position:-143px 0px;
    border-right:1px solid #6f9dd9;
    width:10px;
    }
       .ms-areaseparatorleft img{
    	width:100%;
    	height:100%;
    }
    </style>
     <div class='ms-areaseparatorleft'>
    	<img src="/_layouts/images/blank.gif" alt="" />
     </div>
    
    	<span id="wikiPageNameDisplay" style="display: none;" runat="server">
    		<SharePoint:ListItemProperty runat="server"/>
    	</span>
    	<span style="display:none;" id="wikiPageNameEdit" runat="server">
    		<asp:TextBox id="wikiPageNameEditTextBox" runat="server"/>
    	</span>
    

    This way will make sure the div Container Height is the same as quick launch all the time, so will meet your concern:

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    2018년 5월 26일 토요일 오전 8:37