通过保持纵横比动态调整图像的高度和宽度

Question

请告诉我如何调整图像的宽度和高度。当我上传图像时，它会根据它们的高度和宽度在转发器中自动调整，但在转发器的部分内部。 这是我的代码

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"    runat="server">
<script src="LJCI/js/jquery-1.7.2.min.js"></script>
<script src="LJCI/js/lightbox.js"></script> 
<link href="LJCI/css/lightbox.css" rel="stylesheet" />
<asp:DataList ID="GalleryDataList" runat="server" RepeatDirection="Horizontal" RepeatColumns="3" OnItemDataBound="GalleryDataList_ItemDataBound">
<ItemTemplate>      
    <div style="margin-left: auto;
         margin-right: auto; width: 250px; margin-top: 15px; padding-left: 15px;">
        <div style="border-radius:10px;height:auto; border: 1px solid #CCCCCC;box-shadow: 0 2px 4px rgba(0,0,0,0.9);">
               <div class="lightbox-container">
                <div class="box">                               
         <a id="Img2" href='<%# Eval("ImgUrl").ToString().Substring(1) %>' rel="lightbox[roadtrip]" title='<%# String.Format("{0} {1} {2} {3} {4} {5} {6} {7} {8} {9}","Arrival Date: ", Eval("ArrivalDate","{0:d}"), "<br/><br/>","Brush:", Eval("Brush"), "<br/><br/>", "Size: ", Eval("Width"), "x",Eval("Height") )%>'data-lightbox="roadtrip" data-caption="image-1" >
             <asp:Image ID="Img1" runat="server" ImageUrl='<%#Eval("ImgUrl") %>' CssClass="aspectRatio" /></a>            
           <div class="title1 " style="text-align:left;padding-left:10px ;margin-bottom:16px;">   
                 <asp:Label ID="lblReference" runat="server" Text='<%# Eval("Reference")%>' /><br />
                 Size: <asp:Label ID="lblWidth" runat="server" Text='<%# Eval("Width")%>' /> x <asp:Label ID="lblheight" runat="server" Text='<%# Eval("Height")%>' /><br/>
           <asp:Label ID="lblBrush" runat="server" Text='<%# Eval("Brush")%>' /><br />
              <asp:Label ID="lblDate" runat="server" Text='<%# Eval("ArrivalDate","{0:d}")%>' /><br />
                   <asp:Label CssClass="lblClass" ID="lblStatus" ForeColor="#B86365" runat="server" Text='<%# Eval("Sold").ToString() == "1"? "Sold" : "Available" %>' />
                <br /> <br /><asp:HyperLink ID="DetailsHyperLink1"  CssClass="btnClss2" ForeColor="#B86365" runat="server" NavigateUrl='<%# Eval("Id", "OrderForm.aspx?Id={0}") %>'>Enquiry</asp:HyperLink>
                <br /><div class="fb-like" data-href='<%# Eval("ImgUrl", "http://#.com/Images/prod/{0}") %>'" data-width="20" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div> 
        </div></div>
         <div style="clear: both;">        
        </div>         
    </div>  
</ItemTemplate>

   

Code output like this i want to adjust my images according to their positions