отличный способ отображения изображений

Question

Я новичок в css. Я пытаюсь показать мои изображения в идеальном порядке

вот мой HTML код:

<div id="photos"> 
      <h3>Photo title</h3> 
      <P class="like"><a href="#">Like</a> </P> 
      <p class="date">date </p> 
      <div id="image"> 
       <img src="something.jpg" /> 
      </div> 
      <p class="about">about image goes here</p> 

     </div> 

Теперь я хочу, чтобы стиль такой же, как это:

http://www.desolve.org/

Answer 1

Если вы хотите, чтобы ваше изображение было таким, как стена, я сделал это в приведенной ниже ссылке.

http://jsfiddle.net/zWS7c/1/

Answer 2

Css

#photos{ 
margin:10px; 
    border:solid 1px red; 
    font-family:arial; 
    font-size:12px; 

} 
#photos h3{ 
font-size:18px; 
} 

.date, .like{ 
text-align:right; 
} 

.about{ 
margin:10px; 
} 
#image img{ 
width:100%; 
} 

HTML

<div id="photos"> 
      <h3>Photo title</h3> 
      <P class="like"><a href="#">Like</a> </P> 
      <p class="date">date </p> 
      <div id="image"> 
       <img src="http://www.desolve.org/_images/chicago_banner.jpg" /> 
      </div> 
      <p class="about">about image goes here</p> 

     </div> 

Живая демо http://jsfiddle.net/46ESp/

и теперь устанавливается в соответствии с ваш макет, как как запас * обивка * с или высота

Answer 3

Я думаю, вам нужно вот так

http://jsfiddle.net/VwPna/

Answer 4

С http://www.w3schools.com/css/default.asp вы научитесь легко ... а также вы можете проверить другой сайт CSS от поджигатель в вашем браузере.

ниже код, который вы указали для сайта css для класса баннеров.

.banner { 
    background: url("../_images/gallery_banner.jpg") no-repeat scroll 0 0 transparent; 
    height: 350px; 
    margin-bottom: 4em; 
    overflow: hidden; 
    padding-left: 3.9%; 
    position: relative; 
} 

так же, как вы можете придать больше стиля своим.

Answer 5

Вот как это делается по ссылке, которую вы дали.

HTML:

<div class="banner"> 
    <h1>We love urban photography</h1> 
    <p> 
    We’re betting you do to. Welcome to our site, a growing collection of galleries taken by a small group of passionate urban photographers. Visit our galleries, buy some of our prints, or drop us a line. While you’re at it, feel free to submit a gallery of your own. 
    <strong>Welcome</strong> 
    . 
    </p> 
</div> 

CSS:

.banner { 
    background: url("../_images/gallery_banner.jpg") no-repeat scroll 0 0 transparent; 
    height: 350px; 
    margin-bottom: 4em; 
    overflow: hidden; 
    padding-left: 3.9%; 
    position: relative; 
} 

.banner h1 { 
    color: #FFFFFF; 
    font-size: 2.2em; 
    letter-spacing: 0.1em; 
    padding-top: 290px; 
} 

.banner p { 
    background: none repeat scroll 0 0 rgba(123, 121, 143, 0.8); 
    color: #FFFFFF; 
    font-size: 1em; 
    height: 350px; 
    padding: 1% 1% 0; 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 21%; 
} 

Вам нужно только перевести, что для ваших идентификаторов, классов и формы, то вы его

Answer 6

Там нет ничего особенного, что они» сделанный на справочном веб-сайте. Они использовали изображение как свойство фона div class="preview".
Вот (х) HTML:

<section class="chicago"> 
    <h2><a href="chicago.htm" title="Chicago gallery">Chicago</a></h2> 
    <p class="pubdate"> 
    <time datetime="2011-04-24" pubdate="">April 2011</time> 
    </p> 
    <div class="preview"><a href="chicago.htm" title="Chicago gallery"></a></div> 
    <p class="caption">Big wind, big shoulders. See a different side of Chicago.</p> 
</section> 

И соответствующее CSS

.chicago .preview { 
background: url(../_images/sm_chicago_banner.jpg) no-repeat; 
} 

Вы всегда можете прокрасться-заглянуть правой кнопкой мыши на веб-сайте и выбрать «Просмотр источника страницы» или что-то подобное, в зависимости от вашего браузера :)