为什么我在asp图像控件中的图片看起来被压扁了

我有一个 asp.net 的 c# 网页。在页面上，我有一个图像框，它将每 5 秒左右随机显示一个图像。问题是，有些图片似乎被压扁了。所有图片都在 photoshop 中裁剪为 350x350 像素，图像框的大小为 350x350 像素。如果您使用其他程序查看图片，它们看起来不错，但在 asp.net 页面上，它们看起来很有趣。有人可以告诉我哪里出错了吗？

谢谢克雷格

这是在IE中呈现的源代码，但它看起来与我在 asp.net 默认页面中的内容完全不同。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>
    Home Page
</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form method="post" action="Default.aspx" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE5NTc5Mjg4MDYPZBYCZg9kFgICAw9kFgICAw9kFgICAw8WAh4HRW5hYmxlZGdkZESHdPrJrv0fd90yot44IdP2LuG176cv2XyHWiPVlPSh" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
    theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>

<script src="/WebResource.axd?d=DogTP9ciF8js-919lyE5BNUR3gLIy6vQ94IA8ujQqufPbSjgjYs-MB8TFhgGkZbCezg2T7MihOn_QzXNJh8bUbKXvUZPuDq-Zo79nPbUosQ1&amp;t=634856347325009875" type="text/javascript"></script>

<script src="/ScriptResource.axd?d=4jTc4W6vHbFONhMZfZEniQ0ll2ox3vAxSkMzYB-7HtakDqsmhXCZFBXSRwOb1nRWK6CMzP0qyRYdnYMNnTFXhx2r0J9E2ik7kM8XVmq_UBEPDXqK-kLCJqvRQAvq0wv0ZlWQS1gCjlQxcxLhV1XrJQ2&amp;t=150492e7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=GHu6blHeASt9skHbsJx4uFWYiLKvlA8B1V1ZT8jJM7xJFl3ycZATlv3IHRrGJMm_fpPlBSBh8s1B1E7r9viSf2_vG2Xab8vHZGZqr8izsLUD5pjhbTenZ9dImmZEGONdwrT5ungX3KYzAap2ByhMGQe1RCN4HIeWzLfx9QPaNIL_dFC2Su5ez5Ui0Ux0TCBs0&amp;t=ffffffff940d030f" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="/ScriptResource.axd?d=k0ZMcbO229cP7tJHdqfAeLLkubS_PB3nLJRGVfbZzo992j-U0QXogHZ9AeLO7yXzYa70OSzRIw-wnFwxHbCbmy30q_MrEaY-iqOTNAQzXLCt0hz--HUsMHJsrrht6bk34EjhwJc7bL5h2KjWTMIm5sDlaERrkzNMJ2CYN7WaxPRUTRyOkbTPleHmC1PMtedi0&amp;t=ffffffff940d030f" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=7Pyyv_WcNl6DPXEjw9wnwQXSTOHSqlXve9fO2VxG4I-t0REk8QlK5V7QxKS7jkGO1CGno7PDXkPN1ApWod5KVH--pObLgj1ukjWVTcpKZZNJKm_Fz0qDQd_RVd2qBcBGOEo0qqVjh1A8QaUZNRMFCx12FzcYFbkEV_4FAwoZHekJoj0b0U3QdytSO2iP-U-F0&amp;t=ffffffff940d030f" type="text/javascript"></script>
    <div class="page">
        <div class="header">
            <div class="title">
                <h1>
                   My Family Web Site
                </h1>
            </div>
            <div class="clear hideSkiplink">
                <a href="#NavigationMenu_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=CEw_ah6x15SB8gE6w0h-5pVp-C_glYrwEoXIAM74CoVRv4LUELJEQWVkcLYtMPI0-_6jQVupgDDSAEIK43VxSf5HH-tcHYeqNWJ2d0U1yuU1&amp;t=634856347325009875" width="0" height="0" style="border-width:0px;" /></a><div class="menu" id="NavigationMenu">
    <ul class="level1">
        <li><a class="level1" href="Default.aspx">Home</a></li><li><a class="level1" href="About.aspx">About</a></li><li><a class="level1" href="Daniel.aspx">Daniel</a></li>
    </ul>
</div><a id="NavigationMenu_SkipLink"></a>
            </div>
        </div>
        <div class="main">
    <h2>
        Welcome To The Smith Family Web Site</h2>
    <p>
        Here you can find out all of the great things going on at the homestead.
    </p>
    <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$MainContent$ScriptManager1', 'ctl01', ['tctl00$MainContent$UpdatePanel1','MainContent_UpdatePanel1'], ['ctl00$MainContent$Timer1','MainContent_Timer1'], [], 90, 'ctl00');
//]]>
</script>
    <div class="picture"> 
        <span id="MainContent_Timer1" style="visibility:hidden;display:none;"></span>
        <div id="MainContent_UpdatePanel1">
                <img id="MainContent_Image1" src="Pictures/25.JPG" align="middle" style="height:350px;width:350px;" />
</div>
    </div>

        </div>
        <div class="clear">
        </div>
    </div>
    <div class="footer">
    </div>
<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script>
<script type="text/javascript">
//<![CDATA[
Sys.Application.add_init(function() {
    $create(Sys.UI._Timer, {"enabled":true,"interval":1500,"uniqueID":"ctl00$MainContent$Timer1"}, null, null, $get("MainContent_Timer1"));
});
//]]>
</script>
</form>
</body>
</html>

这是我 asp.net 页面中的代码：

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="FamilyWebSite._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        Welcome To The Smith Family Web Site</h2>
    <p>
        Here you can find out all of the great things going on at the homestead.
    </p>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    <div class="picture"> 
        <asp:Timer ID="Timer1" runat="server" ontick="Timer1_Tick" Interval="1500">
        </asp:Timer>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
        </Triggers>
            <ContentTemplate>
                <asp:Image ID="Image1" runat="server" ImageUrl="~/Pictures/25.JPG" 
                    Width="350px" Height="350px" ImageAlign="Middle" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</asp:Content>

这也是网站.css

/* DEFAULTS
----------------------------------------------------------*/
body   
{
    background: #b6b7bc;
    font-size: .80em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
}
a:link, a:visited
{
    color: #034af3;
}
a:hover
{
    color: #1d60ff;
    text-decoration: none;
}
a:active
{
    color: #034af3;
}
p
{
    margin-bottom: 10px;
    line-height: 1.6em;
}

/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #fff;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
    text-align: center;
}
h1
{
    font-size: 3em;
    padding-bottom: 0px;
    margin-bottom: 0px;
    text-align: center;
}
h2
{
    font-size: 1.5em;
    font-weight: 600;
}
h3
{
    font-size: 1.2em;
}
h4
{
    font-size: 1.1em;
}
h5, h6
{
    font-size: 1em;
}
p
{
    color: #fff;
}
/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0px;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/
.page
{
    width: 960px;
    min-height: 800px;
    background-color: #778899;
    margin: 20px auto 0px auto;
    border: 2px solid #787878;
}
.header
{
    position: relative;
    margin: 2px;
    padding: 0px;
    background: #ccc;
    width: auto;
    text-align: center;   
    border: 2px ridge #787878;


}
.header h1
{
    width: auto;
    font-weight: 700;
    margin: auto;
    padding: 4px 4px 4px 4px;
    color: Olive;
    border: none;
    line-height: 2em;
    font-size: 2em;
    text-align: center;    
    background: #000;

}
.main
{
    padding: 0px 12px;
    margin: 12px 8px 8px 8px;
    min-height: 420px;
}
.leftCol
{
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}
.footer
{
    color: #4e5766;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
}

/* TAB MENU   
----------------------------------------------------------*/
div.hideSkiplink
{
    background-color:Olive;
    width:100%;
}
div.menu
{
    padding: 4px 2px 2px 2px;
}
div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}
div.menu ul li a:hover
{
    background-color: #000;
    color: #465c71;
    text-decoration: none;
}
div.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}
/* FORM ELEMENTS   
----------------------------------------------------------*/
fieldset
{
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}
fieldset p 
{
    margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
    display: block;
}
fieldset label.inline 
{
    display: inline;
}
legend 
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}
input.textEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}
input.passwordEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}
div.accountInfo
{
    width: 42%;
}
/* MISC  
----------------------------------------------------------*/
.clear
{
    clear: both;
}
.title
{
    display: inline-block;
    /*float: left;*/
    text-align: center;
    width: auto;
    border: 2px groove #fff;
    padding: 2px 2px 2px 2px;
    margin: 2px 2px 2px 2px;
}
.loginDisplay
{
    font-size: 1.1em;
    display: block;
    text-align: right;
    padding: 10px;
    color: White;
}
.loginDisplay a:link
{
    color: white;
}
.loginDisplay a:visited
{
    color: white;
}
.loginDisplay a:hover
{
    color: white;
}
.failureNotification
{
    font-size: 1.2em;
    color: Red;
}
.bold
{
    font-weight: bold;
}
.submitButton
{
    text-align: right;
    padding-right: 10px;
}
.picture
{
    padding: 2px;
    margin: 5px;
    border: 3px ridge #fff;
    height: auto;
    width: inherit;
    float: left;
}

不要将高度和宽度设置为 asp 图像标记。由于图片已经在 photoshop 中裁剪为 350x350。ASP 图像标记将以原始高度和宽度呈现图像。

编译器

看不到编辑过的图片文件。干净的重建刷新了资源。

相关内容

最新更新

热门标签：