Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 28.04.2021, 18:59   #1
Kaza4ok
 
Аватар для Kaza4ok
 
Регистрация: 31.07.2020
Сообщений: 6
По умолчанию Адаптивный размер картинок при уменьшении масштаба страницы

Добрый день!

Вопрос такой: на сайте есть блок с картинками, они адаптивные, при уменьшении самого окна браузера уменьшаются соответственно. Но! Если я в полностью развёрнутом окне браузера зажимаю Ctrl + кручу колёсико, уменьшая масштаб страницы, то вокруг всё уменьшается (другие картинки, текст и т.д.), а этот блок с картинками остаётся неизменным. Почему так происходит?

Код:
    <!-- Works -->
      <div class="container-fluid" id="section_works">
        <div class="works">
          <div class="works_col">
            <div class="works_item">
              <img class="works_image" src="img/snail.jpg" alt="..." id="works_pic">
              <div class="works_info">
                <div class="works_title">Улитка</div>
                <div class="works_text">Всегда приходит внезапно</div>                
              </div>
            </div>
            <div class="works_item">
              <img class="works_image" src="img/cup.jpg" alt="..." id="works_pic">
              <div class="works_info">
                <div class="works_title">Хочу в Берлин</div>
                <div class="works_text">Пора выпить кофе и купить билет!</div>                
              </div>
            </div>
          </div>
          <div class="works_col">
            <div class="works_item">
              <img class="works_image" src="img/cats.jpg" alt="..." id="works_pic">
              <div class="works_info">
                <div class="works_title">Банда</div>
                <div class="works_text">Держат весь район</div>                
              </div>
            </div>
            <div class="works_item">
              <img class="works_image" src="img/pink_dude.jpg" alt="..." id="works_pic">
              <div class="works_info">
                <div class="works_title">Alien</div>
                <div class="works_text">Hello, world!</div>                
              </div>
            </div>
          </div>
          <div class="works_col">
            <div class="works_item">
              <img class="works_image" src="img/girl2.jpg" alt="..." id="works_pic">
              <div class="works_info">
                <div class="works_title">Автопортрет</div>
                <div class="works_text">Ну почти...</div>                
              </div>
            </div>
            <div class="works_item">
              <img class="works_image" src="img/leshiy2.jpg" alt="..." id="works_pic">
              <div class="works_info">
                <div class="works_title">Дух леса</div>
                <div class="works_text">Живёт в Уральских горах</div>                
              </div>
            </div>
          </div>
          <div class="works_col">
            <div class="works_item">
              <img class="works_image" src="img/cat2.jpg" alt="..." id="works_pic">
              <div class="works_info">
                <div class="works_title">Бисквит</div>
                <div class="works_text">Грустный ворчун</div>                
              </div>
            </div>
            <div class="works_item">
              <img class="works_image" src="img/turtle2.jpg" alt="..." id="works_pic">
              <div class="works_info">
                <div class="works_title">Черепашонок</div>
                <div class="works_text">На стиле и позитиве</div>                
              </div>
            </div>
          </div>
        </div>
      </div>
CSS:
Код:
.works{
  display: flex;
}
.works_col{
  flex: 1 1 0;
  max-width: 100%;
  height: auto;
}
#works_pic{
  width: 100%;
}
.works_item{
  position: relative;
  background: linear-gradient(to bottom, #c43f8a, #606891);
  max-width: 100%;
  height: auto;
}
.works_item:hover .works_image{  /*hover - это та же штука но при наведении*/
  opacity: 0.2;
}
.works_item:hover .works_info{
  opacity: 1;
}
.works_image{
  transition: opacity 0.3s linear; /*transition - плавный переход, при наведении. opacity - прозрачн-ть. 1s - это 1 секунда, время за кот. происх-т переход. linear - линейный градиент*/
  max-width: 100%;
  height: auto;
}
.works_info{
  width: 100%;
  position: absolute;
  opacity: 0; /*видимость*/

  text-align: center;
  color: white;
  top: 50%;
  left: 0;
  z-index: 1;
  transform: translate3d(0, -50%, 0);
  transition: opacity 0.6s linear;
}
.works_title{
  max-width: 100%;
  height: auto;
  font-family: 'Montserrat', sans-serif;
  font-size: calc(3px + 22 * (100vw / 1280));
  text-transform: uppercase; /*делает капслуком*/
  margin-bottom: 5px;
}
.works_text{
  max-width: 100%;
  height: auto;
  font-style: italic;
  font-size: calc(5px + 13 * (100vw / 1280));
}
Kaza4ok вне форума Ответить с цитированием
Старый 21.11.2021, 21:20   #2
sklees
Пользователь
 
Регистрация: 21.04.2013
Сообщений: 23
По умолчанию

Код:
<div class="container-fluid" id="section_works">
<div class="works">
<script>
var mydata=[
'img/snail.jpg','Улитка','Всегда приходит внезапно','...',
'img/cup.jpg','Хочу в Берлин','Пора выпить кофе и купить билет!','...',
'img/cats.jpg','Банда','Держат весь район','...',
'img/pink_dude.jpg','Alien','Hello, world!','...',
'img/girl2.jpg','Автопортрет','Ну почти...','...',
'img/leshiy2.jpg','Дух леса','Живёт в Уральских горах','...',
'img/cat2.jpg','Бисквит','Грустный ворчун','...',
'img/turtle2.jpg','Черепашонок','На стиле и позитиве','...'
];
for (var i = 7; i < mydata.length; i=i+8) {
document.write('<div class="works_col"><div class="works_item"><img class="works_image" src="'+mydata[i-7]+'" alt="'+mydata[i-4]+'" id="works_pic"><div class="works_info"><div class="works_title">'+mydata[i-6]+'</div><div class="works_text">'+mydata[i-5]+'</div></div></div><div class="works_item"><img class="works_image" src="'+mydata[i-3]+'" alt="'+mydata[i]+'" id="works_pic"><div class="works_info"><div class="works_title">'+mydata[i-2]+'</div><div class="works_text">'+mydata[i-1]+'</div></div></div></div>');
}
</script>
</div>
</div>
sklees вне форума Ответить с цитированием
Старый 21.11.2021, 22:33   #3
sklees
Пользователь
 
Регистрация: 21.04.2013
Сообщений: 23
По умолчанию

Код:
#works_pic{
  width: calc(100px * 100vw / 1000);
}
Код:
.works_image{
  transition: opacity 0.3s linear; /*transition - плавный переход, при наведении. opacity - прозрачн-ть. 1s - это 1 секунда, время за кот. происх-т переход. linear - линейный градиент*/
  width:  calc(100px * 100vw / 1000);
  height:  calc(100px * 100vh / 500);
}
sklees вне форума Ответить с цитированием
Старый 18.12.2021, 21:04   #4
sklees
Пользователь
 
Регистрация: 21.04.2013
Сообщений: 23
По умолчанию

дополнение к сообщению выше: width=100px и height=100px у загружаемого image а в формуле calc() ставятся свои width и height и параметры 1000 и 500 - абстрактные для screen где ширина дважды больше чем высота (например 1920 на 1080), т.е. при разрешении 640 картинка в 2 раза меньше, при разрешении 1920 картинка в 2 раза больше, при разрешении 1024 - (width~100px и height~100px) как оригинал
sklees вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Размещение кнопки на картинке в в верхнем правом углу в не зависимости от масштаба страницы Ivan912 HTML и CSS 0 29.03.2019 22:20
Картинки автоматически на всю ширину экрана и меняли размер при увеличении-уменьшении окна? codor01 HTML и CSS 1 25.06.2018 16:29
при уменьшении размера шапка не уменьшается а сжимается nikytt HTML и CSS 6 17.01.2016 22:57
Скрывающийся div при уменьшении ширины окна Ale}{ander HTML и CSS 0 09.09.2014 19:15
Уменьшение размера видео, при уменьшении окна браузера Kasper1 JavaScript, Ajax 1 09.03.2011 09:46