Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Разделение двух картинок по диагонали

Доброе время суток.
Помогите решить задачу:
Необходимо сделать баннер из 2х картинок, разделенных по диагонали (как в примере), при нажатии на любую из которых, пользователь будет попадать на новую страницу (открываемую в новой вкладке)
Буду очень благодарен за помощь.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.container{
width:100%;
position: relative;
}
.container:after{
content: "";
position: absolute;
display: block;
top:0; left:0; right:0; bottom:0;
background: linear-gradient(-51deg, transparent 63%, #AF9CFF 0);
}
img{
width:100%;
max-height: 100%
}

</style>
</head>
<body>
<div class="container">
<div class="row">
<img src="http://classpic.ru/wp-content/uploads/Devushka-v-golubom-plate.jpg" alt="" class="img-responsive">
</div>
</div>
</body>
</html>
Ответ:
Плохо искал, здесь - самый первый пример выглядит правильно.

Вопрос: Фон из двух картинок

Можно ли как то зафиксировать минимальное расстояниями между картинками фона?
В зависимости от разрешения экрана, они разъезжаются и съезжаются. Тобишь, при любом разрешении картинки будут выравниваться по краям экрана, даже если они начинают наезжать друг на друга.
Нужно сделать так, что бы картинки не подвигались друг к другу ближе чем на 500px
И что бы в случае, когда разрешение монитора не позволяет отобразить две картинки и с минимальным отступом между ними, то картинки "уезжали" за края экрана.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-position</title>
  <style>
   body {
    background-size: 525px 454px;
    background-image: url([url]http://i11.pixs.ru/storage/7/0/6/1jpg_9307135_18404706.jpg[/url]), url([url]http://i11.pixs.ru:/storage/5/5/0/3jpg_8983606_18414550.jpg[/url]), url([url]http://i11.pixs.ru:/storage/5/5/2/4jpg_1010472_18414552.jpg[/url]), url([url]http://i11.pixs.ru/storage/7/0/0/2jpg_9967660_18404700.jpg);[/url]
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: 0px 105px , 100% 1205px, 0px 1205px , 100% 105px ;
 
   }
  </style>
 </head>
 <body>
  <div style="height:50px">
  </div>
 </body>
</html>

это код страницы.
Ответ: Anshag,
не, тогда картинки будут съезжаться, либо Вы не пояснили, то что Вам надо
Дайте ссылку на тестовик и поясните что Вас сейчас не устраивает при
min-width:1050px;
Вопрос: Автоподстройка двух картинок под размер окна в шапке

Всем привет, в шапке установлено две картинки, которые переливаются.
Для этого я использовал стиль.
CSS
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
.image-block {
   display: inline-block;
   padding: 0;
   margin: 0;
   background-position: center center;
   background-repeat: no-repeat;
}
 
.image-up, .image-down {
   border: 0;
   margin: 0;
   padding: 0;
}
 
.image-up {
   opacity: 1.0;
   filter: alpha(opacity=99); /* IE */
   display: block;
   position: absolute;
   z-index: 100;
   transition-duration: 0.96s;
   -webkit-transition-duration: 0.96s;
   -moz-transition-duration: 0.96s;
   -o-transition-duration: 0.96s;
   -ms-transition-duration:  0.96s; /* IE9+ */
}
 
.image-up:hover {
   opacity: 0.00;
   filter: alpha(opacity=00); /* IE */
}
Вот сам код в шапке:
HTML5
1
2
3
4
<div class="image-block">
   <img class="image-up" src="http://noffery.ru/wp-content/uploads/2016/03/1_1.png"   />
   <img class="image-down" src="http://noffery.ru/wp-content/uploads/2016/03/1_2.png"   />
</div>
Проблема в том, что при уменьшении окна, картинки остаются на месте. Я пробовал добавить параметр ширина 100%, но тогда при полном развертывании окна картинка съезжает. Но почему то, в маленьком окне, всё ок.

Подскажите, как сделать чтобы при маленьком окне картинки уменьшались пропорционально и одновременно?
(пожалуйста, с кодом, ибо я новичек в этой теме)
Ответ: да я еще не научился сам писать.. по шаблончикам, по подсказкам)
неделю вот в вордпрессе сижу)
Вопрос: Поменять две картинки местами по клику

Есть две картинки, как сделать, чтобы по клику они менялись местами? Надо использовать onclick
Ответ: Вообще хз. Но работает. Поэтому и попросил помочь
Вопрос: как разместить ссылку между двумя картинками

доброго дня. есть код
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Сайт нах!</title>
</head>
<body text="#336699" bgcolor="#000000"> 
    <H1 align="center">Добро пожаловать на мой сайт !</H1>
<img src="m7JGq8sD-rY.jpg" align="center" width="320" height="240">
    <a href="first.html"><font size="+2" align="center">Моя учебная страница</font></a>
<img src="%D0%B0%D0%BB%D1%8C%D1%82%D0%B5%D1%80.jpg" align="right" width="320" height="320">
</body>
</html>
по идее, ссылка должна быть ровно между двумя картинками. но почему-то никак не реагирует на любые изменения align в этой строке:
HTML5
1
<a href="first.html"><font size="+2" align="center">Моя учебная страница</font></a>
Ответ: я учусь по курсу для чайников. ссылку нашел в соседней теме. а вы можете что-то посоветовать?
Вопрос: Вставить две картинки бэкграунд в один элемент

Здравствуйте
нужно вставить две картинки бэкграунд в элемент li (элемент меню)
вот css:
CSS
1
2
3
4
5
6
ul.vt_menu li{
background:url(images/ver-line.png) 0% 50% no-repeat;       
}
ul.vt_menu li.parent{
background:url(images/arrow3.png) center left no-repeat;    
}
первый бэкграунд - это разделитель пунктов меню
второй бэкграунд - стрелка для пунктов меню, которые имеют подпункты

проблема в том, что бэкграунд arrow3.png (стрелка), не дает отобразить бэкграунд ver-line.png (разделитель)
импортант не помогает, помогите пожалуйста
Ответ: mrtoxas, этот вариант для меня подойдет (угол теугольника везде вправо):
CSS
1
2
3
4
5
6
ul.vt_menu li{
background:url(images/ver-line.png) 0% 50% no-repeat;       
}
ul.vt_menu li.parent{
background:url(images/arrow2.png) center left 1px no-repeat, url(images/ver-line.png) 0% 50% no-repeat;    
}
Вам большое спасибо!
Вопрос: Нужна скрипт onclick..для пары картинок

Ребята, помогите пожалуйста человеку далекому от Java) Мне нужно реализовать на сайте такую штуку :
рядом друг с другом расположены две картинки. при клике на одну из них она сменяется другой и появляется надпись "вы ошиблись, попробуйте еще раз" кликаешь на надпись и возвращаешься обратно к выбору. а если выбираешь вторую картинку,то пара этих фото сменяется на новые две. и таких пары будет три.
Я так понял реализовать это можно Java. Но сам я смог только сделать чтоб одна картинка сменялась другой. Может у кого то есть похожий скрипт или дельные советы... сроки поджимают, поэтому прошу помощи тут. Спасибо за внимание!)
Ответ: Считаем, что второй массив картинок - правильный
Выберите картинку:
<img id="i1" style= "width:100px;height:100px" src=""/>
<img id="i2" style= "width:100px;height:100px" src=""/>
<div id="mess" style="display:none; border: 1px solid red; width:400px">Вы ошиблись. Нажмите, чтобы попробовать еще раз</div>
<script>
 var image1 = ["http://javascript.ru/cat/list/scriptaculous_54.png","http://javascript.ru/cat/list/dom.gif","http://javascript.ru/cat/list/firefox.gif"],
      image2 = ["http://javascript.ru/cat/list/jquery_54.png","http://javascript.ru/cat/list/event.gif","http://javascript.ru/cat/list/opera.gif"],
      i = 0;
  randomImage();

  var test = function() {
     if(this.classList.contains("wrong")) {
        this.src = "http://javascript.ru/cat/list/donkey.gif";
        mess.style.display = "block";
     }
     else {
        if (i < 2 ) {
           i++;
           randomImage();
        }
        else { alert("Вот и все");
            i = 0;
            randomImage();
        }
     }
  }
  i1.onclick = test;
  i2.onclick = test;

  mess.onclick = function() {
      document.querySelector(".wrong").src =  image1[i];
      mess.style.display = "none";
  }
function randomImage() {
   var r = Math.random();
   if (r < 0.5) {
        i1.src =  image1[i];
        i2.src =  image2[i];
        i1.classList.remove("right");
        i2.classList.remove("wrong");
        i1.classList.add( "wrong");
        i2.classList.add("right");
   }
   else {
        i2.src =  image1[i];
        i1.src =  image2[i];
        i2.classList.remove("right");
        i1.classList.remove("wrong");
        i2.classList.add("wrong");
        i1.classList.add("right");
   }
}
</script>
Вопрос: картинки, загруженные по ftp, не отображаются в библиотеке

Первый раз возникла такая проблема. При переносе сайта с хостинга на хостинг перестали отражаться картинки из uploads в библиотеке медиафайлов. Причем, они там есть, и по адресу картинки ее видно в браузере.
Подумала, может, с темой что-то не так.
Установила чистый вордпресс, удалила все плагины, взяла вордпрессовскую тему.
Картинки из uploads не отображаются в библиотеке. Если загрузить картинку через библиотеку медиафайлов, ее видно, но к названию прибавляется единичка (т.а. картинка с этим названием уже есть в библиотеке).
Но вот проблема: картинку, загруженную через библиотеку, видно в библиотеке, а картинку, которая рядом лежит в uploads, но загружалась не через библиотеку, а через ftp, не видно. Просто лежат две картинки в папке. Одна загружена через библиотеку, другая - через ftp. Первую видно, вторую нет. Чем они отличаются - понять не могу - как система распознает, какую картинку показывать, какую нет?
Как это исправить, подскажите, пожалуйста? Не могу же я полторы сотни картинок грузить по одной через библиотеку!
Ответ:
Сообщение от olgastaf
картинки, загруженные по ftp, не отображаются в библиотеке - WordPress
Потому что медиатека ВП - это не просто файлы, а записи в базе, отдельный тип контента.
Загружать надо через ВП.
Но можно и приписать в медиатеке залитое по фтп с пом или
И не забыть про генерацию миниатюр -


Сообщение от olgastaf
Не могу же я полторы сотни картинок грузить по одной через библиотеку!
Почему по одной-то? ВП позволяет хоть мильён за раз загрузить.
Вопрос: Выравнивание двух изображений с разными размерами

В новостях встречаются стоящие рядом две картинки, и часто они имеют разные пропорции. Можно ли задать в css, чтобы они сжимались до одинакового размера по высоте, и чтобы при этом ширина пропорционально уменьшалась.

Ниже примеры, для наглядности.

На первом скрине - как выглядят изображения, если указана ширина для класса.


На втором скрине - если задать высоту изображений для класса. Тогда слетает ширина и изображение растягивается


Нужно, чтобы это выглядело как-то так:
Ответ:
Сообщение от Ermakoff
Не выйдет, все картинки вставлены просто в текст, без каких-либо переменных или какой-то системности.
Сочувствую, тогда это засада... Придётся доводить до ума для начала хаос... Вы же не будете для всех картинок размазывать свои параметры... Тогда остаётся только индивидуальный класс для картинок с резиновой шириной и высотой и блоком обёрткой...
Вопрос: Размещение картинок

Возникла проблема, нужно расположить 8 картинок (во вложении), сделал расположение, но получилось так, что весна и осень не всегда кликабельны. ( т.е первые две картинки не кликабельны в обоих рядах, все остальные кликабельны)
HTML5
1
2
3
4
5
6
7
8
9
10
<p><a href="text1.html"><img src="img/next.png" width="200" height="50" hspace="500"></p></a>
<p style="display:inline-block; width:50px"><a href="#"><img src="img/Весна.png" width="100" height="100" hspace="100" style="dispaly:block"></a></p>
<p style="display:inline-block; width:50px"><a href="#"><img src="img/Лето.png" width="100" height="100" hspace="160" style="dispaly:block"></a></p>
<p style="display:inline-block; width:50px"><a href="Skazki.html"><img src="img/Sova.png" width="100" height="100" hspace="220" style="dispaly:block"></a></p>
<p style="display:inline-block; width:50px"><a href="#"><img src="img/Zagadki.png" width="100" height="100" hspace="280" style="dispaly:block"></a></p>
<br/>
<p style="display:inline-block; width:50px"><a href="#"><img src="img/Осень.png" width="100" height="100" hspace="100" style="dispaly:block"></a></p>
<p style="display:inline-block; width:50px"><a href="#"><img src="img/Зима.png" width="100" height="100" hspace="160" style="dispaly:block"></a></p>
<p style="display:inline-block; width:50px"><a href="#"><img src="img/Явления.png" width="100" height="100" hspace="220" style="dispaly:block"></a></p>
<p style="display:inline-block; width:50px"><a href="#"><img src="img/Игры.png" width="100" height="100" hspace="280" style="dispaly:block"></a></p>
Ответ: Kolapsis, как вариант:

Пример
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Gallery</title>
<style>
    .block{display:inline-block; width:100px; height:100px; margin:0; padding:0; margin-left:60px}
    .link{display:block}
</style>
</head>
<body>
<p><a href="text1.html"><img src="img/next.png" width="200" height="50" hspace="500"></p></a>
<p class="block" style="margin-left:100px"><a href="#" class="link"><img src="img/Весна.png" class="img"></a></p>
<p class="block"><a href="#" class="link"><img src="img/Лето.png" class="img"></a></p>
<p class="block"><a href="Skazki.html" class="link"><img src="img/Sova.png" class="img"></a></p>
<p class="block"><a href="#" class="link"><img src="img/Zagadki.png" class="img"></a></p>
</br>
<p class="block" style="margin-left:100px"><a href="#" class="link"><img src="img/Осень.png" class="img"></a></p>
<p class="block"><a href="#" class="link"><img src="img/Зима.png" class="img"></a></p>
<p class="block"><a href="#" class="link"><img src="img/Явления.png" class="img"></a></p>
<p class="block"><a href="#" class="link"><img src="img/Игры.png" class="img"></a></p>
</body>
</html>


Если что Вы для картинок задали неправильно свойство display:block... И лучше было бы сверстать подобную галерейку списками или с помощью бутстраповской сетки для адатива...