ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / показать изображение любого размера в блоке с фиксированными (без потери пропорций)
11 сообщений из 11, страница 1 из 1
показать изображение любого размера в блоке с фиксированными (без потери пропорций)
    #39575089
waszkiewicz
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
waszkiewicz
Участник
Камарады, как такое дело провернуть? Мечтается показать любое (скажем, фото) без потери пропорций. Ясно-понято, что вполне допустимо появление полос сверху/снизу, однако изображение должно быть по центру. Проще говоря нужен аналог представления каталога изображений Windows средствами HTML/CSS
...
Рейтинг: 0 / 0
24.12.2017, 23:08
| Ответить | Цитировать | Написать  
показать изображение любого размера в блоке с фиксированными (без потери пропорций)
    #39575102
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
waszkiewicz,

http://htmlbook.ru/css/background-size cover?
...
Рейтинг: 0 / 0
24.12.2017, 23:35
| Ответить | Цитировать | Написать  
показать изображение любого размера в блоке с фиксированными (без потери пропорций)
    #39575574
waszkiewicz
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
waszkiewicz
Участник
hVostt,

cover обрезает по ширине. Мне нужно сжать/растянуть исходное фото, чтобы оно целиком влезло в без потери пропорций
...
Рейтинг: 0 / 0
25.12.2017, 15:55
| Ответить | Цитировать | Написать  
показать изображение любого размера в блоке с фиксированными (без потери пропорций)
    #39575579
waszkiewicz
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
waszkiewicz
Участник
возможно, есть вариант чтобы юзер сам выбрал область нужного размера (заранее определенного) и выдрать это дело из фото? Кто-нибудь делал такое? (если нужен JS - не вопрос, тоже возможно)
...
Рейтинг: 0 / 0
25.12.2017, 16:00
| Ответить | Цитировать | Написать  
показать изображение любого размера в блоке с фиксированными (без потери пропорций)
    #39575584
waszkiewicz
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
waszkiewicz
Участник
contain - размещает целиком, но если размер фото много больше размера div - слишком маленькое изображение
...
Рейтинг: 0 / 0
25.12.2017, 16:04
| Ответить | Цитировать | Написать  
показать изображение любого размера в блоке с фиксированными (без потери пропорций)
    #39575623
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
waszkiewiczвозможно, есть вариант чтобы юзер сам выбрал область нужного размера (заранее определенного) и выдрать это дело из фото? Кто-нибудь делал такое? (если нужен JS - не вопрос, тоже возможно)ну я сделал такое под хром...(вращение, кадрирование , ресайз, обрезка, полноразмерное + превьюшка)
...
Рейтинг: 0 / 0
25.12.2017, 17:05
| Ответить | Цитировать | Написать  
показать изображение любого размера в блоке с фиксированными (без потери пропорций)
    #39575641
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
waszkiewicz,


это дело совмещается.. да и нагугливается просто вагон решений
...
Рейтинг: 0 / 0
25.12.2017, 17:39
| Ответить | Цитировать | Написать  
показать изображение любого размера в блоке с фиксированными (без потери пропорций)
    #39575685
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
hVosttэто дело совмещается.. да и нагугливается просто вагон решенийты не трепись, если знаешь ссылки- давай,
а если не в теме - заткнись.
...
Рейтинг: 0 / 0
25.12.2017, 19:37
| Ответить | Цитировать | Написать  
показать изображение любого размера в блоке с фиксированными (без потери пропорций)
    #39575782
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
waszkiewicz...изображение должно быть по центру. Проще говоря нужен аналог представления каталога изображений Windows средствами HTML/CSS
Если я правильно понял , то задача элементарная.
Вот сходу простой пример папки с изображениями (таблицы используются для выравнивания по центру), только ссылки на реальные фотки вставьте туда

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Image Folder test</title>
<style>
* { margin:0; padding:0 }

.big td { text-align:center; width:420px; height:420px; border-collapse:collapse; }
.big img { max-width:400px; max-height:400px; }

.small td { cursor:pointer; border-collapse:separate; padding:5px; border-spacing:5px; border:solid 1px transparent; text-align:center; }
.small td:hover { border:solid 1px red; }
.small .sel { border:solid 1px red; }
.small img { max-width:100px; max-height:100px; }
</style>
<script>
var current;
document.addEventListener("DOMContentLoaded", init, false);
function init() {
  var i, a = document.querySelectorAll('.small td');
  for (i=a.length-1; i>=0; i-=1) {
    a[i].addEventListener('click', function(e) {
        document.querySelector('#dest').innerHTML = this.innerHTML;
        this.className='sel'; if (current) { current.className=''; } current=this;
      }, false);
  }
}
</script>
</head>
<body>
  <table class="big">
    <tbody>
    <tr>
      <td id="dest"></td>
    </tr>
    </tbody>
  </table>
  <table class="small">
    <tbody>
    <tr>
      <td><img src="1.jpg" alt=""/></td>
      <td><img src="2.jpg" alt=""/></td>
      <td><img src="3.jpg" alt=""/></td>
      <td><img src="4.jpg" alt=""/></td>
      <td><img src="5.jpg" alt=""/></td>
      <!-- ... -->
    </tr>
    </tbody>
  </table>
</body>
</html>
...
Рейтинг: 0 / 0
26.12.2017, 04:30
| Ответить | Цитировать | Написать  
показать изображение любого размера в блоке с фиксированными (без потери пропорций)
    #39575804
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
вадяhVosttэто дело совмещается.. да и нагугливается просто вагон решенийты не трепись, если знаешь ссылки- давай,
а если не в теме - заткнись.

иди лечись
...
Рейтинг: 0 / 0
26.12.2017, 07:49
| Ответить | Цитировать | Написать  
показать изображение любого размера в блоке с фиксированными (без потери пропорций)
    #39575818
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
бухалтер фантоцци,

судя по
waszkiewiczчтобы юзер сам выбрал область нужного размера (заранее определенного) и выдрать это дело из фото?надо вырезать (убрать лишне).
но ТС только на первом этапе, как только он получит вырезанное - получит кучу фоток разного размера , которые будут при показе и увеличиваться и уменьшаться, подгоняясь по "стандарт"
поэтому надо что б первоначальное изображение "кадрировалось" т.е. нужный фрагмент изображения вписывался в требуемые рамки (исходник увеличивался/уменьшался, поворачивался, перемещался относительно "рамки обрезки" )
...
Рейтинг: 0 / 0
26.12.2017, 08:08
| Ответить | Цитировать | Написать  
11 сообщений из 11, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / показать изображение любого размера в блоке с фиксированными (без потери пропорций)
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=39575102&tid=1444355]:
 0ms
get settings:
 5ms
get forum list:
 10ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 54ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 55ms
get tp. blocked users:
 2ms
others: 11ms
total:  155ms
созд. / загр.: 155ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]