css - 给图像固定高度宽度不显示完整图像

Question

我有图像 slider 。它从数据库中的表格中滑动图像。为了显示正确的 slider ，我为图像提供了固定的高度宽度，如下所示

 <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<style type="text/css" media="screen">
    .slides_container {
        width: 1000px;
        height: 475px;
    }

   .slides_container div {
       width: 1000px;
       height: 475px;
       display: block;
   }
   #newslides .slidesjs-previous {
       position: absolute;
       top: 25%;
       left: 2%;
       z-index:999;
   }
   #newslides .slidesjs-next{
       position: absolute;
       top: 25%;
       right: 2%;
       z-index:999;
   }

</style>

<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="Server">
<div class="breadcrumb">
    <a href="News.aspx">News</a> <span>&gt;</span> Photo Gallery
</div>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div id="container">
    <div id="example">
        <div id="newslides" >
            <asp:Repeater ID="rptGallery" runat="server">
                <ItemTemplate>
                    <div class="slides_container">
                        <div style="float: left; height: 27px; width: 1000px; font-size: 18px;">
                            <span style="float: left"><%# Eval("Title") %> </span>
                            <span style="float: right"><%# Eval("PhotoCredit") %> </span>
                        </div>
                        <img src='<%# Eval("FileURL") %>' width="1000" height="475" alt="Slide 1">
                    </div>

                </ItemTemplate>
            </asp:Repeater>

             <a href="#" class="slidesjs-previous slidesjs-navigation" >
                <img src="images/prevArrow.png" width="50" height="43" alt="Arrow Prev">
            </a>
            <a href="#" class="slidesjs-next slidesjs-navigation" >
                <img src="images/nextArrow.png" width="50" height="43" alt="Arrow Next">
            </a>

        </div>


    </div>
</div>

<script src="Scripts/jquery.slides.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {

        $('#newslides').slidesjs({
            width: 940,
            height: 250,
            navigation: {
                active: false,
                effect: "slide",

            },
            pagination: {
                active: false,
                // [boolean] Create pagination items.
                // You cannot use your own pagination. Sorry.
                effect: "fade"
                // [string] Can be either "slide" or "fade".
            },
            play: {
                active: true,
                auto: true,
                interval: 2000,
                swap: true,
                pauseOnHover: true,
                restartDelay: 2500,

            }
        });
    });
</script>

但是，由于该图像裁剪。它不会在 slider 中显示完整图像。对此有任何解决方案。提前致谢

Answer 1

您使用了错误的 slider 尺寸。

更新你的

    $('#newslides').slidesjs({
      width: 940, // change width to 1000
      height: 250, // change height to 475
      ....