Блог

Главная - Вопросы по программированию - Измените ширину изображений в соответствии с соотношением сторон

Измените ширину изображений в соответствии с соотношением сторон

#javascript #html #css #image

#javascript #HTML #css #изображение

Вопрос:

Я создаю веб-сайт для чтения комиксов. У меня возникла проблема с отображением изображений. Большинство моих изображений имеют соотношение сторон 2/3. Означает 1000×1500. Поэтому я отображаю их с помощью приведенных ниже правил css. Но есть некоторые изображения, похожие на двухстраничные изображения. Поэтому, когда применяется правило css max-width=728px , это изображение 4/3 raito ничего не может прочитать. Итак, в основном я хочу изменить правило css для max-width=728px случаев, когда пользователь сталкивался с изображениями в соотношении 4/3. Правило Css max_width=728px по-прежнему должно применять изображения в соотношении 2/3, но когда соотношение меняется на 4/3, оно должно быть max-width=1250px . Что мне нужно сделать для решения этой проблемы? Это связано с css или требуется некоторый javascript. Я думаю, что у этого сайта с мангой есть будущее. Изображения с двумя страницами отображают ширину ~ 1300, и когда я сжимаю браузер, его javascript обновляет ширину и высоту.

Пример:http://www.mangaeden.com/en/en-manga/berserk/344/17/ Мой веб-сайт:http://mangabozok.com/oku/Berserk/346/5

HTML:

 <div class="gnc02">
<img src="paths">
</div>

CSS:

 .gnc02 img {
     display:block;
     margin:auto;
     max-width: 728px;
     height: auto;
}

Ответ №1:

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

 .gnc02 img
{
    display: block;
    margin: auto;
    max-width: 1250px;
    max-height: 1092px;
}

Для изображений 2: 3 max-height применяется и ограничивает ширину до 728 пикселей. Для изображений 4: 3 max-width применяется и ограничивает ширину до 1250 пикселей.

 .gnc02 img
{
    display: block;
    margin: auto;
    max-width: 1250px;
    max-height: 1092px;
}  
 <div class="gnc02">
  <img src="http://cdn.mangaeden.com/mangasimg/82/82018e71734a3893bc60f2e3a5df4520b1343c862ef09e3c7b30fd1d.jpg" />
</div>
<br/>
<div class="gnc02">
  <img src="http://cdn.mangaeden.com/mangasimg/d6/d6afc1d18c0c08d6129f121a3531f47933d8fdbccca0ea7f78ed10e8.jpg" />
</div>

Примечание: при запуске фрагмента кода вы должны переключиться в режим «Полная страница».

Ответ №2:

 .gnc02 {
    max-width: 728px;
    display:block;
    margin:auto;
}

.gnc02 img {
    max-width: 100%;
    float:left;
}

Комментарии:

1. Спасибо. Кто бы мог подумать, что это может быть так просто.

2. Я применил его, но он не работает. Не могли бы вы взглянуть на мой веб-сайт? mangabozok.com:8080/oku/Berserk/346/5

Ответ №3:

попробуйте это 

 .gnc02 {
    width: 99% !important;
    display:block;
    margin:auto;
    }
    .gnc02 img {
        max-width: 100%;
      }  
  
    <div class="gnc02">
      <img src="http://cdn.mangaeden.com/mangasimg/82/82018e71734a3893bc60f2e3a5df4520b1343c862ef09e3c7b30fd1d.jpg" />
    </div>

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