Форумы портала PHP.SU :: Версия для печати :: Выравнивание картинок любых размеров.

1. Psychotech - 13 Августа, 2015 - 22:22:53 - перейти к сообщению

Всем доброго времени суток.
Пару дней назад занялся сайтом. Встал вопрос создания чего-то вроде слайд шоу. Написал быстро свой велосипед, но к сожалению "цепь спадает". В общем что я сделал. использовал "дивную" верстку, где главный блок выступает вроде контейнера всего слайд шоу. Затем в него помещаются два контейнера. главный экран - где отображается большая версия картинки, под ним лента с мини-версиями картинок. Все это управляется javascript`ом с jquery. Щелкаешь на маленькой картинке и она плавно сменяет уже показываемую. Если не щелкать то картинки сами меняются на таймере. Все работает хорошо и красиво с тестовыми картинками имеющими определенную высоту и ширину, а когда поставил разно размерные картинки то "цепь спала".
Я сделал так что картинка в главном экране всегда растянута по высоте. Естественно когда ширина больше высоты картинка съезжает за блок вправо. Переопределить высоту на ширину не проблема. Но меня интересует возможность сделать так чтобы картинка всегда оставалась в рамке большого экрана не зависимо что у неё больше. Возможно ли это сделать используя только CSS? ориентацию высоты картинки я сделал там. Если нет было бы неплохо лицезреть ваши предложения и варианты.

CODE (htmlphp):
скопировать код в буфер обмена

 
.slider{
        background-color: Silver;
        border: 0px dotted Black;
        padding: 5px;
        width: 700px;
}
.big_slide{
        background-color: Silver;
        border: 0px dashed Black;
        box-shadow: 1px 1px 2px black;
        padding: 5px;
        margin: 5px;
        margin-left: 150px;
        width: 500px;
        height: 300px;
        text-align: center;
}
.big_slide img{
        border-radius: 10px;
        height: 100%;
        text-align: center;
}
.slide_line{
        background-color: Silver;
        border: 0px solid Black;
        padding: 5px;
        margin: 5px;
        width: 700px;
        height: 120px;
        margin-left: 50px;
}
.inliner{
        display: inline-block;
}
.inliner[type=none]{
        background-color: Gray;
        border: 2px solid Black;
        border-radius: 10px;
        float: left;
        width: 100px;
        height: 100px;
        margin: 10px;
        box-shadow: none;
}
.inliner[type=none] img{
        border-radius: 10px;
        height: 100px;
}
.inliner[type=selected]{
        background-color: Gray;
        border: 2px solid Yellow;
        border-radius: 10px;
        float: left;
        width: 100px;
        height: 100px;
        margin: 10px;
        box-shadow: 3px 3px 3px black;
}
.inliner[type=selected] img{
        border-radius: 10px;
        height: 100px;
}
#hideinfo{
        display: none;
}
 

CODE (html):
скопировать код в буфер обмена

<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
 
        <title>Мой сайт</title>
 
        <script type="text/javascript" src="lastrelise.js"></script>
        <script type="text/javascript" src="jsf/slider.js"></script>
        <LINK rel="stylesheet" type="text/css" href="css/stylepage.css">
        <LINK rel="stylesheet" type="text/css" href="css/slider.css">
        <?
        $data["data"] = "images list";
        $data["item"][0] = "/img/test.png";
        $data["item"][1] = "/img/test2.png";
        $data["item"][2] = "/img/test3.png";
        $data["item"][3] = "/img/test4.png";
        $data["item"][4] = "/img/test5.png";
        $data["after"] = "end of list";
        $data = json_encode($data);
        $data = stripslashes($data);
        ?>
 
</head>
 
<body>
 
<div class="Slider">
        <div class="big_slide">
        <center>
                <img src="/img/test3.png" border="0">
        </center>
        </div>
        <div class="slide_line">
                <div class="inliner" type="none">
                        <img class="imageslide" src="/img/test.png" border="0">
                </div>
                <div class="inliner" type="none">
                        <img class="imageslide" src="/img/test2.png" border="0">
                </div>
                <div class="inliner" type="selected">
                        <img class="imageslide" src="/img/test3.png" border="0">
                </div>
                <div class="inliner" type="none">
                        <img class="imageslide" src="/img/test4.png" border="0">
                </div>
                <div class="inliner" type="none">
                        <img class="imageslide" src="/img/test5.png" border="0">
                </div>
        </div>
</div>
<?php
$out = '<div id=hideinfo>'.$data.'</div>';
print "$out";
 
 
?>
<script type="text/javascript">
generalCall();
showtime();
</script>
</body>
 
</html>

CODE (javascript):
скопировать код в буфер обмена

function initio(selector_big, selector_line, selector_select_line, data){
        var dataaccess = data;
        $(selector_big).html('<center><img src="'+dataaccess["item"][0]+'"border="0"></center>');
        var cols = dataaccess["item"].length;
        $(selector_line).html('');
        for(var i = 0; i < dataaccess["item"].length; i++){
                var htmtemp = $(selector_line).html();
                if(i==0){
                        $(selector_line).html(htmtemp + '<div class="'+selector_select_line+'" id="indent'+ i +'" type="selected" onclick="click2Change('+i+');"><img  src="'+dataaccess["item"][i]+'"border="0"></div>');
                }else{
                        $(selector_line).html(htmtemp + '<div class="'+selector_select_line+'" id="indent'+ i +'" type="none" onclick="click2Change('+i+');"><img  src="'+dataaccess["item"][i]+'"border="0"></div>');
                }
        }
}
function addChildren(jsonobject){
        var decoded = JSON.parse(jsonobject);
        return decoded;
};
function generalCall(){
        var jsonobj = $("#hideinfo").text();
        initio(".big_slide", ".slide_line", "inliner", JSON.parse(jsonobj));
}
function click2Change(value){
        var jsonobj = $("#hideinfo").text();
        var dataaccess = JSON.parse(jsonobj);
        $(".big_slide").fadeOut('slow', function (){
                $(".big_slide").html('<center><img src="'+dataaccess["item"][value]+'"border="0"></center>');
                $(".big_slide").fadeIn();
        });
        
        var htmtemp = $(".slide_line").html();
        $(".slide_line").html('');
        for(var j = 0; j<dataaccess["item"].length; j++){
                
                var htmtemp = $(".slide_line").html();
                if(j==value){
                $(".slide_line").html(htmtemp + '<div class="inliner" id="indent'+ j +'" type="selected" onclick="click2Change('+j+');"><img  src="'+dataaccess["item"][j]+'"border="0"></div>');
                }else{
                        $(".slide_line").html(htmtemp + '<div class="inliner" id="indent'+ j +'" type="none" onclick="click2Change('+j+');"><img src="'+dataaccess["item"][j]+'"border="0"></div>');
                }
        }
}
function showtime(){
        var jsonobj = $("#hideinfo").text();
        var dataaccess = JSON.parse(jsonobj);
        var show_page = 0;
        setTimeout(function run() {
        show_page++;
        if(show_page>=dataaccess["item"].length){
                show_page = 0;
        }
        click2Change(show_page);
  setTimeout(run, 10000);
}, 10000);
}