Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Центрировать изображение с max-height:100% и max-width:100%

Здравствуйте.
Есть блок с высотой 300px и шириной 30%, внутри блока есть картинка. размер картинки может быть любой и надо чтобы он отображался нормально т.е не растягивался, не выходил за границы блока.

С центрированием по вертикали разобрался, но не получается центрировать изображение по горизонтали.

Помогите пожалуйста.



Высокая и маленькая картинки отображаются не правильно.

HTML5
1
2
3
4
5
6
7
8
<div class="panel panel-success">
    <div class="panel-heading">
        <h3 class="panel-title">Высокая картинка</h3>
    </div>
    <div class="panel-body gallery-intro">
        <img src="images/a1.jpg"   alt="Responsive image">
    </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
.gallery-intro{
    height: 300px;
    display: table-cell;
    vertical-align:middle;  
 
}
.gallery-intro>img{
    max-width: 100%;
    max-height: 100%;
 
}
Ответ: работающий код, который я привел выше.
А что там разбираться? Если убираете 30%, то блок подстраивается под ширину изображения. И тогда надо уже выравнивать его, а не картинку.
Вопрос: Изображение спозиционировать справа внизу блока

Доброго времени суток!
Есть проблема. Есть блок внутри которого расположен текст и изображение, изображение должно быть расположенно внизу справа данного блока и при этом ОБТЕКАТЬСЯ текстом. С помощью CSS его можно расположить только справа вверху(с обтеканием), если средствами CSS опускать вниз обтекание пропадает. Можно ли сделать обтекание средствами JS, вот что я попробовал:
HTML:
<div class="text_soon">
<img src="images/wate_img.png" alt="" class="item2">
<p>
Много текста
</p>
</div>
CSS:
.item2{
float: right;
}
JS:
$(".item2").offset(function(i,val){
return {top:val.top + 50, left:val.left};
});

Данная JS Функция опускает вниз, но все равно пропадает обтекание сверху.
Ответ: Спасибо за помощь, уговорил заказчика, что данное изображение лишнее
Вопрос: Обтекание текстом внутри фигуры

1) Фигура должна остаться динамической (уметь менять ширину и высоту);
2) ОБЪЯЗАТЕЛЬНА ПОДДЕРЖКА СТРАНИЦЫ В БРАУЗЕРАХ IE 7-8!!! Поэтому угловые элементы - именно картинки.
2) Обтекание текстом должно быть таким, как на прикрепленном ниже изображении.

Все изображения, которые использует страница - прикрепляю к посту.

Картинки:
1) Так должно быть;
2), 3) Эти изображения использует страница html.

Спасибо за помощь.





Ответ: Прикрепляю код.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body {
background-image: url(images/1.jpg);
background-size:cover; /*Масштабирует изображение с сохранением пропорций так, 
                       чтобы его ширина или высота равнялась ширине или высоте блока*/
}
#block1 {
  width: 70%;
  height:50%;
} 
.tlq, .blq {width:32px;height:32px;float:left;}
.tbl, .bbl {margin: 0 32px;height:32px; background-color: #66ff66;}
.trq, .brq {width:32px;height:32px;float:right;}
.ml {width:100%;  background-color: #66ff66;}
.tlq {background: transparent url('./images/q11.png')  0px 0px no-repeat;}
.trq {background: transparent url('./images/q11.png')  -32px 0px no-repeat; }
.brq {background: transparent url('./images/q11.png')  -32px -32px no-repeat; }
.blq {background: transparent url('./images/q11.png')   0px -32px no-repeat; }
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="block1">
      <div class="tl">
        <div class="trq">
            </div>
        <div class="tlq">
            </div>
        <div class="tbl">
            </div>
      </div> 
      <div class="ml">
          some text some text some text some text some text some text some text some text 
          some text some text some text some text some text some text some text some text 
          some text some text some text some text some text some text some text some text 
      </div> 
      <div class="bl">
        <div class="brq">
            </div>
        <div class="blq">
            </div>
        <div class="bbl">
            </div>
      </div> 
  </div>
Вопрос: Макет фиксированный и центрированный

Есть макет в psd, ширина которого 1638px.
Фон за footer-ом/header-ом тянется, т.е. черный фон хедера при изменении масштаба должен быть на всю ширину окна, а контент центрирован, сайт не резиновый.
Каким образом это реализовать? Помогите, пожалуйста.
Ответ:
Сообщение от zdorovox
Вы бы попроще объяснили
Самый простой пример - табличка из одной строки и одной колонки.
Она может центрировать внутри себя достаточно разнотипные объекты...

Сообщение от zdorovox
нарисовали что ли
Тут не форум художников...
Если ты не поленишься создать тестовый хтмл пример - на нем можно будет что-то показать.
Вопрос: Обтекание div

У меня есть 7 изображений, одно - большое, другие 6 - как 1/3 большого.Как сделать так, чтобы эти 6 как бы обтекали большое по бокам?
м_м
мбм
м_м
Ответ: Можно сделать так:
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Делаем один общий блок
<div class="block_all">
    <!-- здесь большой блок блок -->
    <div class="block_big">
        <img src="big_img.jpg" alt="#">
    </div>
 
    <!-- здесь маленький блок c 3-мя картинками -->
    <div class="block_small">
        <img src="small_img_1.jpg" alt="#">
        <img src="small_img_2.jpg" alt="#">
        <img src="small_img_3.jpg" alt="#">
    </div>
</div>
Задаём стили:
Код CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.block_all{
    overflow: hidden; /* эт чтобы не разбежались блоки*/
}
.block_big{
    float: left; /* большой блок обтекает маленький слева*/
}
.block_big img{
    /* а тут уже играемся с большим изображением, можем его разместить слева/ справа или посередине */
}
.block_small{
    float: right; /* маленький блок обтекает большой справа */
    width: 150px; /* ширину маленькому блоку задаём обязательно, 
                    причём вставляй по ширине картинок, тогда картинки будут друг под другом */
}
.block_small img{
    width: 150px /* ширина картинок маленького блока равна или меньше ширине блока */
}
Вроде всё, удачи!

Добавлено через 55 минут
А лучше всего если у тебя фиксированный сайт

допиши в

Код CSS
1
2
3
4
5
6
7
.block_big{
   width: 70% или др. значение
}
 
.block_small {
    width: 30% или др значение
}
Вопрос: Шаблон с обтеканием левого меню статического сайта

Существует ли такой шаблон WordPress, в котором текст может обтекать левое меню? (для статического сайта)
Хочется иметь именно левое меню, но когда текст статьи длинный, то слева от него, под меню остаётся много пустого незаполненного пространства.
Какие шаблоны позволяют это реализовать?
Или реализовать обтекание левого меню?
Ответ: Разобрался, достаточно было выбрать тему, в которой меню можно настраивать отдельно для каждой страницы: на коротких страницах ставлю любимое боковое меню, на длинных страницах верхнее горизонтальное меню, в которых меньше пунктов, а страница получается на всю ширину.
И тогда не нужно никакого обтекания.
Спасибо!
Вопрос: Аномальное явление: запрос изображения "image/webp" при наличии в HTML встроенного скрипта

Обнаружил, что при загрузке одной из страниц сайта в фоновом режиме загружается также и главная страница сайта.
Чаще всего такое бывает, когда на странице запрашивается несуществующее изображение, а сайт настроен так, что при запросе несуществующего изображения выполняется редирект на главную. Но это не мой случай (у меня редиректится на 404 - специально перепроверил).

Отключил в браузере изображения - всё нормально (главная в фоне не загружается). Значит, проблема связана с изображениями. Проверил ссылки всех изображений в исходном коде страницы - все ссылки корректные (пустых нет, ни одна из них на главную не ссылается).

Далее полез в отладчик Chrom'а и столкнулся с непонятным явлением. Среди всех подзапросов, выполняемых в ходе загрузки страницы, имеется запрос главной страницы сайта:
автор
Accept:image/webp,*/*;q=0.8
Accept-Encoding:gzip, deflate, sdch
Accept-Language:ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4
Cache-Control:no-cache
Connection:keep-alive
Cookie: ...
Host:www.site.ru
Pragma:no-cache
Referer:
User-Agent: ...

Как видно, запрашивает "image/webp". Ответ, естественно, получает в "text/html".
При этом в исходном html-коде Chrome указывает на строку, где прописывается javasript:

<script type="text/javascript" charset="UTF-8">  // вот на эту строку указывает Chrome, что якобы здесь запрашивается www.site.ru
    javasript-код, меняющий классы у двух элементов
</script>

Одновременно с этим, в консоли выводит сообщение:
автор
Resource interpreted as Image but transferred with MIME type text/html

-------------------
Здесь всё логично (запрашивает "image/webp", получает "text/html"), кроме главного: с какого перепугу объявление скрипта "text/javascript" в html-коде приводит к попытке загрузке хрен знает какого изображения типа "image/webp" по адресу www.site.ru ?

Ещё одно наблюдение. Если этот проблемный скрипт вообще убрать из кода страницы, то то же самое поведение наблюдается уже на другом (следующем) скрипте. Т.е. проблема не в каком-то конкретном встроенном скрипте, а в присутствии в html любого объявления скрипта.

Загрузка главной страницы в фоне наблюдается в FF и в Chome. В других браузерах не проверял.
Ответ:
автор
А почему думаете, что это глюк? Может процедура рендеринга страницы у него именно такова, что изображение ему требуется именно в момент обработки встроенного скрипта.
Маловероятно, поскольку встроенный скрипт меняет 2 класса у элементов страницы. "background-image: URL()" прописан изображению, которое никак не связано с этими элементами (у которых меняются классы). Они в разных частях страницы находятся и в разных блоках (и эти блоки имеют один уровень, т.е. один в другой не вложены). При этом часть изображений загружаются до выполнения этого скрипта, часть - после.

Хотя, этим можно было бы объяснить вот это:
автор
Ещё одно наблюдение. Если этот проблемный скрипт вообще убрать из кода страницы, то то же самое поведение наблюдается уже на другом (следующем) скрипте. Т.е. проблема не в каком-то конкретном встроенном скрипте, а в присутствии в html любого объявления скрипта.
Впрочем, в последний раз Chrome в качестве строки-инициатора для фоновой загрузки главной страницы сайта указал не строку скрипта, а строку с левой ссылкой (не имеющей отношения в изображению с "background-image: URL()").
Плюс, для некоторых других изображений Chrome тоже некорректно строку-источник определяет (указывает на строку с левой ссылкой)

Так что, 8:2 в пользу глюка.
Вопрос: не выводится изображение из json

Добавляемые изображения сохраняются в папку компонента и в бд в формате json. Но при выводе отображается пустое окно, хотя если напрямую задавать в строке браузера полный путь до файла - все ок.
Делаю так:

получаю изображения для текущей записи:
PHP
1
2
$images = json_decode($row->pics);
echo 'image '.$images[0].'</br>';
Выводится название изображения, все правильно

Но тут

PHP
1
2
 echo '<a href="'.JPATH_COMPONENT.DS.'images'.DS.$images[0].'" class="modal" 
          rel="{size: {x: 800, y: 600}, handler:\'iframe\'}">Щелкните, чтобы увидеть изображение</a>';
И тут

PHP
1
2
echo JHTML::_('image', JPATH_COMPONENT.DS.'images'.DS.$images[0] ,
            'Восклицательный знак', array('width'=>800,'height'=>600), true, false);
Пустота вместо изображения(пустой фрейм и рамка без самого изображения), хотя путь верный(если набирать напрямую в браузере к файлу - показывает).
Никогда не работал с изображениями в джумле, что неправильно делаю, подскажите пожалуйста.
Ответ:
href="'.JPATH_COMPONENT.DS.
Это в ссылке не нужно, да и точка перед JPATH_COMPONENT тем более.
И вообще, это абсолютный путь к изображению на диске, а не урл ссылка. Для джумлы не нужно это, она автоматом подставляет начальный урл, так что достаточно задать:
PHP
1
images/'.$images[0]
ПС. Без точек в начале и конце ссылки...
Вопрос: Передать данные формы + изображения

Доброго времени суток, товарищи. Возникла трудность с отправкой комментариев. Не могу отправить одновременно файлы и данные с формы. Данные с формой отправляются отлично, но вот файлы, принимаю их в php, они выглядят как [object Object].
Может быть я допустил какую-то элементарную ошибку, может быть, я запутался, прошу помощи.
Вот какой код получился в js.
Javascript
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
$('body').on('change', '#files', function () {
        var files = $(this)[0].files;
 
        if (files.length <= 5) {
            readURL(files);
            $('#frm').each(function () {
                this.reset();
            });
        } else {
            swal('Ошибка', 'Вы не можете загружать больше 5 изображений!', 'error');
            files.length = 0;
        }
    });
 
    function readURL(files) {
        //var files = input.files;
        // Для каждого файла
        $.each(files, function (index, file) {
            if (files[index].type.match('image.*')) {
                if (dataArray.length + files.length <= 5) {
                    var fileReader = new FileReader();
 
                    fileReader.onload = (function (file) {
                        return function () {
                            dataArray.push({name: file.name, value: this.result});
                            addImage((dataArray.length - 1));
                        };
                    })(files[index]);
                    fileReader.readAsDataURL(file);
                } else {
                    swal('Ошибка', 'Вы не можете загружать больше 5 изображений!', 'error');
                }
            } else {
                swal('Ошибка', 'Файл не является изображением!', 'error');
            }
        });
    }
собственно вывожу все, что содержится в $_POST
$this->request->post
получаю вот такое:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
array(7) {
  ["comment"]=>
  string(6) "asdasd"
  ["post_id"]=>
  string(2) "68"
  ["pid"]=>
  string(1) "0"
  ["parent_id"]=>
  string(1) "0"
  [0]=>
  string(15) "[object Object]"
  [1]=>
  string(15) "[object Object]"
  [2]=>
  string(15) "[object Object]"
}
Добавлено через 6 часов 28 минут
Забыл добавить, поторопился.
Javascript
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
53
54
55
56
57
// Массив для всех изображений
    var dataArray = [];
 
$('body').on('submit', '.addCommentForm', function (event) {
        event.preventDefault();
        var data = new FormData($(this)[0]);
        $.each(dataArray, function (key, value) {
            data.append(key, value);
        });
        
        //data = json.stringify(data);
 
        if ($(this).hasClass('active') == false) {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'index.php?route=post/post/addComment',
                data: data,
                processData: false,
                contentType: false,
                beforeSend: function () {
                    $(".addCommentForm .btn-success").text("");
                    $(".addCommentForm .btn-success").blur();
                    $(".addCommentForm .btn-success").addClass("loading");
                },
                complete: function () {
                    $(".addCommentForm .btn-success").text("Отправить");
                    $(".addCommentForm .btn-success").removeClass("loading");
                },
                success: function (json) {
                    if (typeof (json['error']) != "undefined") {
                        if (json['error']) {
                            if (json['error']['comment']) {
                                swal('Ошибка', json['error']['comment'], 'error');
                                $(this).closest('form').addClass('has-error');
                            } else {
                                $(this).closest('form').removeClass('has-error');
                            }
                            if (json['error']['login']) {
                                swal('Ошибка', 'Для того, чтобы оставлять комментарии, необходимо авторизироваться на сайте', 'error');
                            }
                            if (json['error']['image']) {
                                swal('Ошибка', json['error']['image'], 'error');
                            }
                        }
                    }
                    if (json['success']) {
                        $('.PostComments').html(json['load']);
                        //$('.PostComments').load('index.php?route=post/post/refresh .PostComments');
                    }
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                }
            });
        }
    });
Добавлено через 10 минут
Если же я отправляю изображения вот так:
Javascript
1
2
3
4
$.each(dataArray, function(index, file) {
         $.post('upload.php', dataArray[index], function(data) {
         });
     });
то все работает... но мне нужно еще отправить данные формы.
Ответ: Я ведь не просто передаю изображения, а при загрузке пользователем изображений проверяю, чтобы их было не больше 5ти, чтобы файлы являлись только изображением. Также делаю превью, перед загрузкой изображений на сервер. при написании комментария пользователь нажимает кнопку отправить комментарий. и выполняется код:
Javascript
1
$('body').on('submit', '.addCommentForm', function (event) {
полный код выше...
Вопрос: Некорректно определяется ширина и высота изображения

В обработчике
$('#usrpfile').on("change", function() {
изменения элемента
<input id="usrpfile" type="file"
не всегда корректно определяется ширина и высота изображения. То верно, то неверно, искажая пропорции рисунка выводимого в соответствующем контейнере.

Для небольших файлов, например 37 Кб, возвращает габариты неверно, как бы не 'успевает' возвращать правильную ширину-realWidthPic и высоту-realHeightPic. Поэтому использовал сначала метод setTimeout, вроде заработало. Затем понадобилось на время определения ширины и высоты прятать рисунок, и вновь его отображать после установки подогнанных размеров.
Скрытие и отображение при этом стало работать ( с точки зрения корректного определения ширины и высота рисунка) и без setTimeout.
То есть проблема как бы решена, просто остались сомнения что какое-либо сочетание размеров файла и периода их обработки может вылезти боком.
Прошу подсказать обоснованы ли эти сомнения и верно ли в принципе такое решение?


$('#usrpfile').on("change", function(){     // #1, при изменении  <input id="usrpfile" type="file">
  file = this.files[0];   // Получаем файл из <input type="file") - элемент массива files[0]					

// вставка контейнеров, img и ссылки 'удалить' 
 $("<div class='occupiedImgCont'><div class='occupiedImg-wrapper'><img id='usrpPhoto' src='' /></div><div class ='clear'></div><div class='userpic-del'><a class='del_usrp' href='#'>Удалить фото</a></div></div>").insertBefore($('.emptyImgCont'));  
 
 uploadImage = $('#usrpPhoto');  // пустой объект <img id='usrpPhoto' 
 var oReaderUploadPic = new FileReader(); 	// объект FileReader   
 oReaderUploadPic.onload = (function() {	// #C	
  return function(e) {			// #B
  uploadImage.attr('src', e.target.result);
  uploadImage.hide();	// скрываем рис. на время определения его ширины и высоты
  // setTimeout (function(){	// отсрочка 10 мс
   realWidthPic  = uploadImage.width(); // ширина изображения (px) 
   realHeightPic = uploadImage.height(); // высота изображения (px)  
   ratioPic =  realWidthPic / realHeightPic;
   // ширина и высота контейнера изображения 
   var imgContWidth  = $('.occupiedImg-wrapper').width()-6,            	
        imgContHeight = $('.occupiedImg-wrapper').height()-6; 		
   
   // Подгонка размера загруженной картинки под контейнер
   if (realWidthPic > realHeightPic) {
     if ((imgContWidth/ratioPic) <= imgContHeight) {
       fittedWidthPic  = imgContWidth;	
       fittedHeightPic = fittedWidthPic / ratioPic;				
     } else {					
      fittedHeightPic = imgContHeight;	
      fittedWidthPic  = fittedHeightPic * ratioPic;
    }
   } else {
    fittedHeightPic = imgContHeight;
    fittedWidthPic  = fittedHeightPic * ratioPic;			
   }
   // установка подогнанных размеров изображения
   uploadImage.height(fittedHeightPic);
   uploadImage.width(fittedWidthPic);					
    uploadImage.show();
//  }, 10);   // отсрочка выполнения на 10мс, можно даже поставить 0-эффект тот же
  }; 	 // end #B
 })();   // end #C	
 oReaderUploadPic.readAsDataURL(file);  // считываем текущий image file как data URL
  
}); // end#1
Ответ: setTimeout не пойдет, нужно обрабатывать окончание загрузки изображения. Или же - oReaderUploadPic.readAsDataURL(file) возвращает все данные о файле, а зная какого формата изображение, можно из этих данных получить данные только заголовка файла, в котором указано и его разрешение.