Nano Hash - криптовалюты, майнинг, программирование

Изображения шириной 100% на странице с горизонтальной прокруткой

Я пытаюсь создать страницу для фоторепортажа - она ​​предназначена для горизонтальной прокрутки, но я также хочу, чтобы изображения масштабировались до 100% высоты и автоматической ширины (поэтому без обрезки). Горизонтальная прокрутка и 100% высота/автоматическая ширина не проблема. Но я не могу правильно расставить изображения - они продолжают перекрываться. См.: http://i.imgur.com/nzOon.jpg

Это возможно? Я работаю над этим целую вечность, и у меня заканчиваются идеи.

Спасибо!

JS:

<script type="text/javascript" charset="utf-8">
    $(function(){
            $(".image").wrap("<td>");
    });
</script>

CSS:

.image {
position:absolute;
width:auto;
height:100%;
}

HTML:

<div id="page-wrap">
         <div class="image">
              <img src="images/Betty-001.jpg" id="image-contents" />  
         </div>

         <div class="image" style="margin-left:75%;">
               <img src="images/Betty-001.jpg" id="image-contents" />  
         </div>             
</div>

image css width horizontal-scrolling
09.06.2012

  • опубликуйте свой код, чтобы мы могли увидеть, в чем может быть проблема 10.06.2012

Ответы:


1

HTML сделает за вас прокрутку и ширину изображения, если вы позволите.

Демонстрация: http://jsfiddle.net/ThinkingStiff/sVa7S/

HTML:

<div id="scroll">
       <img src="http://thinkingstiff.com/images/priorities.png" /><!--
    --><img src="http://thinkingstiff.com/images/priorities.png" />
</div>

CSS:

#scroll {
    height: 100%;
    overflow-x: scroll;    
    white-space: nowrap;
    width: 100%;
}

#scroll img {
    height: 100%;
    vertical-align: top;
}
09.06.2012
  • !!! Вот и все. Большое спасибо. Это сводило меня с ума весь день. Очень ценится. 10.06.2012

    • 2

    Вы можете использовать следующий CSS:

    html, body {
    width: 100%;
    height: 100%;
}

div {
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#image1 {
    background-image: url('image1');
}
#image2 {
    left: 100%;
    background-image: url('image2');
}
#image3 {
    left: 200%;
    background-image: url('image3');
}
#image4 {
    left: 300%;
    background-image: url('image4');
}​

    используя фоновые изображения со 100% шириной и 100% высотой.

    Вы можете увидеть живой пример его работы здесь

    09.06.2012
  • Большое спасибо. Это почти то, что я пытаюсь сделать - я надеялся, что изображения изменят размер до того же соотношения. Настройка размера фона на автоматический 100% работает, но тогда пробел между изображениями неправильный (см. jsfiddle.net/ WWUCD/3). Есть ли способ обойти это? Спасибо! 10.06.2012
  • Вы можете использовать background-repeat: no-repeat; посмотрите на этот пример jsfiddle.net/WWUcD/5. Не уверен, почему это работает, но это так, так что кто жалуется! 10.06.2012
  • Спасибо! Я использую это для обложки - это прекрасно. Огромное спасибо. 10.06.2012
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..