Discussion :

[Seb.26]

Bonjour à tous,

j'ai placé un carousel (bootstrap) en fond d'écran dans ma page de login, mais les images s'affichent en petit alors que je voudrais que les images soient redimensionnées dynamiquement pour occuper tout l'écran.

pour le moment, seul le carousel est bien agrandi, mais les images gardent leur taille et j'ai une bordure bleu sombre sur les cotés ...

ci-dessous mon fichier aspx :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<%@ Page Title="Login" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="seb.Login" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
 
    <script type="text/javascript">
        $(document).ready(function () {
            $("#myCarousel").carousel(
                {
                    interval: 5000,
                    pause: false
                });
        });
    </script>
 
    <style type="text/css">
    .carousel{
        background: #2f4357;
        margin-top: 20px;
    }
    .carousel .item img{
        margin: 0 auto; /* Align slide image horizontally center */
    }
    .bs-example{
	    margin: 20px;
    }
    </style>
 
    <span z-index:100 style="position:absolute; top:0px; left:0px; width:100%">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Wrapper for carousel items -->
            <div class="carousel-inner">
                <div class="active item">
                    <img src="../images/Caroussel_01.jpg">
                </div>
                <div class="item">
                    <img src="../images/Caroussel_02.jpg">
                </div>
                <div class="item">
                    <img src="../images/Caroussel_03.jpg">
                </div>
            </div>
        </div>
    </span>
 
    <div class="container-fluid">
        <div class="row">
 
            <div class="hidden-xs hidden-sm col-md-1 col-lg-2">
            </div>
 
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                <H1><asp:Label ID="lbl_title" runat="server" Text="lbl_title" Font-Bold="True" ForeColor="White"/></H1>
                <p><asp:Label ID="lbl_title_detail" runat="server" Text="lbl_title_detail" ForeColor="White" /></p>
            </div>
 
            <div class="hidden-xs hidden-sm col-md-1 col-lg-1">
            </div>
 
            <div class="col-xs-12 col-sm-12 col-md-5 col-lg-3">
 
                <div class="well">
                    <p>
                        <asp:Label ID="lbl_login_title" runat="server" Text="lbl_login_title" Font-Bold="True" />
                        <br />
                        <asp:Label ID="lbl_login_title_detail" runat="server" Text="lbl_login_title_detail" />
                    </p>
 
                    <asp:PlaceHolder ID="zone_notification" runat="server" />
 
                    <div role="form">
 
                        <div class="form-group">
                            <asp:Label ID="lbl_login_user" AssociatedControlID="txt_login_user" Text="lbl_login_user" runat="server" />
                            <asp:TextBox ID="txt_login_user" runat="server" CssClass="form-control" />
                        </div>
 
                        <div class="form-group">
                            <asp:Label ID="lbl_login_pwd" AssociatedControlID="txt_login_pwd" Text="lbl_login_pwd" runat="server" />
                            <asp:TextBox ID="txt_login_pwd" runat="server" CssClass="form-control" TextMode="Password" />
                        </div>
 
                        <p><asp:CheckBox ID="chk_login_rememberMe" runat="server" Text="chk_login_rememberMe"/></p>
 
                        <p><asp:LinkButton ID="bt_login" runat="server" CssClass="btn btn-primary" Width="100%" OnClick="bt_login_Click">bt_login</asp:LinkButton></p>
 
                        <p><asp:LinkButton ID="bt_lost_pwd" runat="server" CssClass="btn btn-primary" Width="100%" OnClick="bt_lost_pwd_Click">bt_lost_pwd</asp:LinkButton></p>
 
                    </div>
                </div>
 
                <div class="well">
                    <p>
                        <asp:Label ID="lbl_register_title" runat="server" Text="lbl_register_title" Font-Bold="True" />
                        <br />
                        <asp:Label ID="lbl_register_title_detail" runat="server" Text="lbl_register_title_detail" />
                    </p>
 
                    <div role="form">
 
                        <p><asp:LinkButton ID="bt_register" runat="server" CssClass="btn btn-primary" Width="100%" OnClick="bt_login_Click">bt_register</asp:LinkButton></p>
 
                    </div>
                </div>
 
            </div>
 
            <div class="hidden-xs hidden-sm col-md-1 col-lg-2">
            </div>
        </div>
    </div>
 
</asp:Content>

Merci de vos lumières

[Dokho1000]

A mon avis tu aurais plus de chances sur d'autre forum qui traite que de la partie front. (html, javascript, css...)
Quelle est la taille réel de tes images...?

[Julien698]

Salut,

sujet similaire : http://stackoverflow.com/questions/1...io-in-carousel

[Seb.26]

pour la teille de images : si elles sont plus petites que mon écran (écran de PC full HD par exemple) je veux qu'elles soient zoomées et si elles sont plus grandes (écran de smartphone par exemple), je veux qu'elles soient réduites...



merci, @+
Seb