允许图像填充< div>不论宽高比 [英] Allow Image to Fill <div> Regardless of Aspect Ratio

问题描述

我需要获取一张图片以填充< div></div>标签.我不想保持宽高比.在我的母版页中，有以下内容:

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

在aspx页面中，我有以下内容:

< asp:Content ContentPlaceHolderId =" PlaceHolderBodyLeftBorder" runat =服务器"
    < div class ='ms-areaseparatorleft'>
< img src ="/_ layouts/images/blank.gif" alt =" />
    </div>
</asp:Content> 

我有一个替换空白gif的css文件:

 div.ms-areaseparatorleft {
背景:#83b0ec url("/_ layouts/images/navshape.jpg");
背景重复:不重复；
背景位置:-143px 0px;
border-right:1px实线#6f9dd9;
宽度:10px;
}

我的div是快速启动导航和主页数据(PlaceHolderMain)之间的边界.

定义特定大小的问题是，当我从快速启动"中添加/删除项目时，需要更改代码以填充空间.

解决方案

嗨Whalensdad，

将CSS样式宽度添加到100％，并以显示模式作为块以填充特定div中的图像，这是供您参考的演示:

 div.ms-areaseparatorleft {
背景:#83b0ec url("/_ layouts/images/navshape.jpg");
背景重复:不重复；
背景位置:-143px 0px;
border-right:1px实线#6f9dd9;
宽度:10px;
高度:200px；
}
    .ms-areaseparatorleft img {
宽度:100％;
显示:块;
}
    

渲染看起来像这样:

更多信息在这里:

如何用图片填充div

谢谢

最好的问候

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?

解决方案

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

这篇关于允许图像填充&lt; div&gt;不论宽高比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！