Search the Community
Showing results for tags 'Картинка'.
Found 11 results
-
Доброго времени суток, прошу помощи в решении задачи. Пример (как должно быть): На данном рисунке: Есть общий контейнер (зеленый прямоугольник), чьи размеры (и ширина и высота) заданы фиксированно (но эти величины заранее не известны + при изменении размеров окна браузера могут меняться) Внутри общего контейнера лежит контейнер изображения (красный прямоугольник). Ну и есть само изображение, о котором не известно вообще ничего. Суть задачи: изображение должно масштабироваться сохраняя свои пропорции так, чтобы занимать всю высоту или ширину зеленого контейнера (быть вписанным в зеленый контейнер), при этом красный контейнер должен иметь размеры в точности такие как само изображение (облегать его). Задача должна быть решена на чистом CSS + HTML. Доп информация: Эта информация имеет косвенное отношение к задаче, и я ее тут предоставил просто чтобы дать больше информации о контексте применения решения если оно найдется. Многое из того что тут описано я не включал в пример задачи чтобы не усложнять ее. Мои наработки: Пока что наиболее близкого поведения я смог добиться только таким способом: https://codepen.io/ows_nightwolf/pen/yxoYBa Но тут изображение не может вырасти больше своего реального размера, и красный контейнер не повторяет размеров изображения
-
по центру что бы при изменении окна она сдвигалась в центр? Извините за глупый вопрос, новичок просто.
-
Контент всегда зависит от внутри написанного текста по высоте, но когда вставляю картинку контент как был 10px так и остался. Как сделать, чтобы контент изменялся в зависимости от вставленного изображения? Код: http://jsfiddle.net/em1Lhnhr/2/ Заранее спасибо!
-
Добрый день! Можно считать, что верстаю впервые. Проблема возникла вот с чем. Не могу понять как наложить два блока на картинку(пример во вложении). =( сейчас а нужно вот код html и ниже css <!doctype html> <html> <head> <meta charset="utf-8"> <title>Parlez-vous français</title> <link type="text/css" rel="stylesheet" href="css/table.css"/> <style> body { background: url(image/fonmain.png); background-repeat: no-repeat; background-position: center; } </style> </head> <body> <div id="textabove"> <p> <img src="image/parlez1.png" alt="parlez-vouz francais?" width="300px"/><br> <img src="image/parlez2.png" alt="учим французский язык вместе." width="250px"/> </p> </div> <div> <img id="podlogka" src="image/fon2.png" alt="подложка" height="450px" width="950px"/> </div> </body></html>* { margin: 0; padding: 0;}#textabove { margin-bottom: 10px; margin-left: 15%; margin-top: 55px; line-height: 1px;}#podlogka { margin-left: 205px;}
-
<div class="news"> <img src="img/no_image.png" > <h4>Российские цены на BMW M6 Купе</h4> </div>Всем привет. Как сделать, что бы заголовок h4 позиционировался с правой стороны картинки?
-
Подскажите пожалуйста, как реализовать эффект как на этом сайте http://industriefer.ru/ ( наведите на бойлер ).
-
Здравствуйте! Возникла небольшая проблема с вёрсткой. Есть html: <div class="best"> <div class="slider"> <img src="img/food.png"> </div> </div> Есть css: .slider:active > img { background-image: url("../img/block.png") } Моя цель, чтобы на картинку, которая из html загружался сферху фон из css (block.png) по клику. Но выходит так, что фон (block.png) загружается за картинкой из html (food.png) и ощущение, что ничего не происходит.
-
Здравствуйте. Возникла проблема с картинками: откуда-то берутся пробелы между картинками, хотя, судя по написанному в коде, их быть не должно. Подскажите, как от них избавиться, очень нужно. Вот HTML <section class="content"><div><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a></div></section>Вот CSS .content {position: absolute;left: 250px;top: 0px;margin: 0px;padding: 0px;}img {border: 0px;padding: 0px;margin: 0px;}Вот скриншот http://joxi.ru/2nPhUhjKTJB5BcGDUEE Спасибо!
-
Здравствуйте, уважаемые гуру! Не могли бы вы подсказать, как выровнять картинку по центру div'а в коде, который будет представлен ниже. Я знаю, что код не совершенен, и если вам будет не трудно, укажите на ошибке и если можно с объяснениями, чтобы я мог исправить их в дальнейшем. Буду очень признателен за помощь. css: body { width:100%; height:100%; } body div#rotator{ float:left; min-width: 60%; max-width: 65%; min-height: 70%; max-height: 80%; } #rotator li img { min-width: 85%; max-width: 100%; min-height: 75%; max-height: 80%; } #rotator div > ul.list{ position: relative; list-style: none; padding: 0px; min-width: inherit; max-width: inherit; min-height: inherit; max-height: inherit; } #rotator ul.list > li { position: absolute; margin: 0 auto; list-style: none; min-width: inherit; max-width: inherit; min-height: inherit; max-height: inherit; } #rotator ul.list > li.show { z-index:500; min-width: inherit; max-width: inherit; min-height: inherit; max-height: inherit; }код html: <div id="rotator"> <ul class="list"> <li class="show"><img src="<?php echo $path.'/1'.$type; ?>"/></li> <?php for ($i=2;$i<=$count;$i++){?> <li><img src="<?php echo $path.'/'.$i.$type; ?>"/></li> <?php } ?> </ul> </div>Если нужно, данный код располагается здесь. Заранее размер картинки неизвестен. Нужно чтобы и вертикальные и горизонтальные картинки были одинаково расположены по центру. Пожалуйста, помогите!
-
добрый день проблема у меня такая никак не магу понять в ie10 ie9 паказывает картинку а в ie8 невидет картинки http://sait-ru.1gb.ru/
-
Есть скрипт: <script type="text/javascript" src="/js/jqueryrotate.2.1.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { // Функция статичного поворота на 45 градусов jQuery("#rotate1").rotate(45); // Постоянное вращение картинки var angle = 0; setInterval(function(){ angle+=3; jQuery("#rotate2").rotate(angle); },50); // Поворот при наведении курсора на 180 градусов jQuery("#rotate3").rotate({ bind: { mouseover : function() { $(this).rotate({animateTo:-180}) }, mouseout : function() { $(this).rotate({animateTo:0}) } } }); }); </script> <img src="картинка" width="25px" alt="" id="rotate3" /> Нужно объединить постоянное вращение с наведением мыши на картинку, то есть когда мышь в не зоны картинки, картинка не вращается, как только мы наводим мышь на картинку, картинка начинает постоянно вращаться по часовой стрелки, как только мы отводим мышь с картинки, картинка останавливается скрипт jqueryrotate.2.1.js
