Вопросы по CSS

Scorpion

1 мая 2017 г., 16:11

Зелимхан

# Jane (01.05.2017 / 16:01)
я б лучше резала на сервере

т.е. с помощью PHP?

Jane

1 мая 2017 г., 16:13

Блиносвёрт ?

# Scorpion (01.05.2017 / 16:11)
т.е. с помощью PHP?

ну если у тебя сайт на php, то да

Jane

1 мая 2017 г., 16:17

Изменено

Блиносвёрт ?

Добавлено: 01.05.2017 / 16:14
Scorpion, если опять ангуляр, то есть модули
http://ngmodules.org/modules/n ... esize
вот примерчик
https://codepen.io/michaeljcal ... prhtG

Добавлено: 01.05.2017 / 16:17
ой, это я тебе по resize накидала, а если нужен crop, то поискать что-то по crop, тоже есть

Scorpion

1 мая 2017 г., 16:24

Зелимхан

Добавлено: 01.05.2017 / 16:19
Jane, У меня сайт на PHP. не ангулар..
Есть готовое решение на PHP?

Добавлено: 01.05.2017 / 16:24
Щас у меня так:

case 'save':{
            $files = reArrayFiles($_FILES['image']);
            $imagesNames = array();
            
            if(isset($_POST)){
                $output_dir = "../images/";
                $tovar_id = abs(intval($_POST['tovar_id']));
                if(!empty($files))
                {
                  
                         foreach($files as $file){
                        $name = '';
                        if($file['error'] == 0){
                            
                            $name = md5(time().$file['size']).'.jpg'; 
                            $imagesNames[] = $name;
                            move_uploaded_file($file["tmp_name"],$output_dir.$name);
                        }
                      }
                    }   
                  }
                }

Jane

1 мая 2017 г., 16:38

Блиносвёрт ?

Scorpion, не помню, пользовалась классом, который есть в джоне

Scorpion

1 мая 2017 г., 16:40

Зелимхан

жаль

Blade

2 мая 2017 г., 2:28

The Frontend-Warrior

Добавлено: 02.05.2017 / 01:21

# Scorpion (01.05.2017 / 15:44)
как сделать вывод изображения 1x1 не растягивая картинку? Можно элементами css или нужно резать с PHP?

Опиши попроще проблему. А еще лучше напиши структуру html кода, как она выводится

Добавлено: 02.05.2017 / 02:28
если надо вставить картинку, а часть, которая не влезла в масштаб 1х1, обрезать, то можно попробовать такой код (не помню как делать для любых изображений, написал под альбомные ориентации картинок)

css (+/-)

.image-container {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
  outline: 1px solid black;
}

.image-container img {
  position: absolute;
  min-height: 100%;
  max-height: 100%;
  min-width: 100%;
  
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

html (+/-)

<div class="image-container">
    <img src="https://img3.goodfon.ru/original/1920x1080/e/5a/scorpion-mortal-kombat-x-boec.jpg?d=1" alt="image" />
</div>

Scorpion

2 мая 2017 г., 10:54

Зелимхан

Blade, Спасибо, попробовал... Думаю мне нужен PHP класс

Scorpion

13 мая 2017 г., 10:37

Зелимхан

Blade, не получилось.. Есть другой вариант с помощью css?

Blade

13 мая 2017 г., 15:50

Изменено

The Frontend-Warrior

# Scorpion (13.05.2017 / 10:37)
Blade, не получилось.. Есть другой вариант с помощью css?

есть, например через фоновое изображение

css (+/-)

.image-list {
      width: 600px;
      margin: 100px 0;
      outline: 1px solid blue;
      float: left;
    }

    /* float clearfix */
    .image-list:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
      }

    .image-list h3 {
      text-align: center;
    }

    .image {
      float: left;
      margin: 0 10px 10px 10px;
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
    }

    .image--vertical {
      width: 180px;
      height: 120px;

    }
    .image--horizontal {
      width: 180px;
      height: 250px;
    }

    .image--square {
      width: 180px;
      height: 180px;
    }

html (+/-)

<div class="image-list">
    <h3>Изображения 180х120</h3>
    <div class="image image--vertical" style="background-image: url(./images/1.jpg)"></div>
    <div class="image image--vertical" style="background-image: url(./images/2.jpg)"></div>
    <div class="image image--vertical" style="background-image: url(./images/3.jpg)"></div>
    <div class="image image--vertical" style="background-image: url(./images/4.jpg)"></div>
    <div class="image image--vertical" style="background-image: url(./images/5.jpg)"></div>
    <div class="image image--vertical" style="background-image: url(./images/6.jpg)"></div>
  </div>

  <div class="image-list">
    <h3>Изображения 180х250</h3>
    <div class="image image--horizontal" style="background-image: url(./images/1.jpg)"></div>
    <div class="image image--horizontal" style="background-image: url(./images/2.jpg)"></div>
    <div class="image image--horizontal" style="background-image: url(./images/3.jpg)"></div>
    <div class="image image--horizontal" style="background-image: url(./images/4.jpg)"></div>
    <div class="image image--horizontal" style="background-image: url(./images/5.jpg)"></div>
    <div class="image image--horizontal" style="background-image: url(./images/6.jpg)"></div>
  </div>

  <div class="image-list">
    <h3>Изображения 180х180</h3>
    <div class="image image--square" style="background-image: url(./images/1.jpg)"></div>
    <div class="image image--square" style="background-image: url(./images/2.jpg)"></div>
    <div class="image image--square" style="background-image: url(./images/3.jpg)"></div>
    <div class="image image--square" style="background-image: url(./images/4.jpg)"></div>
    <div class="image image--square" style="background-image: url(./images/5.jpg)"></div>
    <div class="image image--square" style="background-image: url(./images/6.jpg)"></div>
  </div>

зы пардон, скрин из lightshot не сжимал перед загрузкой

Прикрепленные файлы:

321

(1.38 MB)

1494679847screenshot_4.png