Сделайте div подходящим для всех размеров экрана

Я создаю слайд-шоу полного размера, я не хочу использовать изображения, так как их будет легче скопировать, поэтому вместо этого я использую divs с фоном, но у меня возникают проблемы чтобы они соответствовали всем разрешениям экрана. Естественно, чем меньше экран, тем больше увеличивается изображение. Я разместил свой код ниже.Сделайте div подходящим для всех размеров экрана

<!DOCTYPE html> 
<head> 

<style> 

html,body{ 
height:100%; 
overflow-y:hidden; 
margin:0px; padding:0px; 
} 

.bxslider { 
position:absolute; 
background:red; 
height:1000px; 
overflow-y: scroll; 
margin:0; padding:0; 
} 

.red {  
background:red url(http://chefpaulcrowe.com/img/background-example.jpg) no-repeat center  center; width:100%; height:100%; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 
.green {  
background:green url(http://chefpaulcrowe.com/img/background-example.jpg) no-repeat center center; width:100%; height:100%; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 
.blue {  
background:blue url(http://chefpaulcrowe.com/img/background-example.jpg) no-repeat center center; width:100%; height:100%; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

#bx-pager-wrapper { width:100%; background:black; position:absolute; bottom:0; padding:30px 0 30px 0; } 
#bx-pager { position:relative; float:right; margin-right:100px; } 
#bx-pager img { padding:0 30px 0 0; } 

</style> 

<script src="http://bxslider.com/js/jquery.min.js"></script> 

<script src="http://bxslider.com/lib/jquery.bxslider.js"></script> 
<script src="http://bxslider.com/js/scripts.js"></script> 

<script type="text/javascript"> 

    var _gaq = _gaq || []; 
_gaq.push(['_setAccount', 'UA-36499930-1']); 
_gaq.push(['_trackPageview']); 

(function() { 
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google- analytics.com/ga.js'; 
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
})(); 

</script> 

</head> 

<body> 

<script type="text/javascript"> 
    $(document).ready(function(){ 

$('.bxslider').bxSlider({ 
    pagerCustom: '#bx-pager' 
}); 
    }); 
</script> 


<ul class="bxslider"> 
    <li class="red"></li> 
    <li class="green"></li> 
    <li class="blue"></li> 
</ul> 


<div id="bx-pager-wrapper"> 
    <div id="bx-pager"> 
    <a data-slide-index="0" href=""><img src="http://bxslider.com/images/thumbs/tree_root.jpg" /></a> 
    <a data-slide-index="1" href=""><img src="http://bxslider.com/images/thumbs/tree_root.jpg" /></a> 
    <a data-slide-index="2" href=""><img src="http://bxslider.com/images/thumbs/tree_root.jpg" /></a> 
    </div> 

</body> 

</html>

источник

2013-12-03 Liam David Hodnett

Можете ли вы описать проблемы, с которыми работаете? –

@MikeClark при использовании рабочего стола Я вижу всю фотографию, однако, если я перехожу на меньший экран, как ноутбук, я вижу меньше фотографии, на iPad, я вижу еще меньше фотографии и, конечно, на мобильном телефоне , вряд ли какая-либо картина. Любые предложения –

попробуйте '' вместо 'backgound' stylings –

я бы очень рекомендовал против этого.

Это ограничивает и не защищает ваши изображения. Я могу проверить ваш css, скопировать путь на вашем сайте и все равно получить доступ к изображению. Если вы сделали это с помощью IMG-тегов (мой рекомендуемый способ), вы можете отключить щелчок правой кнопкой мыши на своем веб-сайте с помощью javascript и это поможет защитить ваши изображения. Вы можете сделать это так:

How do I disable right click on my web page?

Если вы настаиваете делать это таким образом (неправильный путь), вот он идет.

С галереей вы не хотите крышки. При размере экрана, например, на iPhone, половина изображения будет обрезана, потому что по умолчанию крышка гарантирует, что изображение покрывает окно просмотра ENTIRE, и оно сохраняет пропорции изображения.

Я думаю, что вы хотите это:

.red { 
    background: red url(images/background.png) no-repeat; 
    background-size: 100% center; 
}

Это все еще собирается отрезать часть изображения, если изображение слишком высоко, и оставит цвет фона (красный), показывающий через это изображение не достаточно высокое, чтобы заполнить экран любой ширины вашего браузера.

Единственный способ, чтобы полностью обеспечить свое изображение никогда не будет расширяться мимо высоты или ширины браузера видовом, чтобы сделать это следующим образом:

<ul class="bxslider"> 
    <li class="photo"><img src="image1.png"/></li> 
    <li class="photo"><img src="image2.png"/></li> 
    <li class="photo"><img src="image3.png"/></li> 
</ul>

И CSS будет:

.photo { 
    height: 100%; 
    width: 100%; 
    max-height: 100%; 
    max-width: 100%; 
} 

.photo img { 
    width: 100%; 
}

Выполняйте все, что угодно, но вы не можете иметь максимальную ширину или максимальную высоту на фоновом изображении, поэтому единственный способ гарантировать, что вы не отрезаете свое изображение, - это сделать второй способ, который я рекомендовал, а затем просто отключите правый щелчок или защитите свои изображения каким-либо другим способом.

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: НИ ПРИ КАКИХ ОБСТОЯТЕЛЬСТВАХ ЗАЩИТА ВАШЕГО ИЗОБРАЖЕНИЯ - Бросьте водяной знак на них, если вы хотите, чтобы они защищали это плохо.

Просто размещение изображений здесь в качестве фоновых изображений ТЕРРИТОРИАЛЬНАЯ семантика.

источник

2013-12-03 21:54:37

Спасибо @Mike Legacy, я собираюсь взять ваш совет и попробовать! –

Отключение правой кнопкой мыши с помощью javascript тоже не является идеальным, и меня, вероятно, уволят за то, что вы его заработали. Но по крайней мере галерея будет правильно закодирована и семантична. Вы должны объяснить своему клиенту, что это Интернет, и изображения могут быть сохранены из Интернета. Самое лучшее для него - добавить водяные знаки и авторские права прямо на изображения, которые он представляет. Или не показывать их в Интернете, если он действительно волнуется. –

попытка дать ширину 100% к bxslider и то же самое для размера Б.Г.

http://jsfiddle.net/vuB64/

.bxslider { 
position:absolute; 
background:red; 
height:1000px; 
    width:100%; 
overflow-y: scroll; 
margin:0; padding:0; 
} 

.red {  
background:red url(http://chefpaulcrowe.com/img/background-example.jpg) no-repeat center  center; width:100%; height:100%; 
-webkit-background-size: 100%; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: 100%; 
}

источник

2013-12-03 21:42:29 andrei

Это прекрасно работает @schopy :) Большое спасибо за вашу помощь! Я очень ценю это –

. Добро пожаловать :) – andrei

Вы знаете, что делать это с помощью фоновых изображений не будет защищать ваши изображения, правильно? –

Сделайте div подходящим для всех размеров экрана

ответ

Смежные вопросы