顯示圖像的完美方式

我是新來的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/

來源

2012-06-05 sudeep cv

什麼是「完美的方式」？只需使用任何瀏覽器開發工具檢查他們的圖像，並且您將同時獲得html和css ... –

我不知道如何實現這一點，這就是爲什麼我把它放在這裏。任何方式我會嘗試儘快更新我的css部分。 –

這樣做會做什麼。 – SVS

如果你想讓你的形象像牆上的貼子，我在下面給出的小提琴鏈接。

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

來源

2012-06-05 11:49:31 SVS

感謝您的時間和興趣，幫助我out.i希望標題像和日期必須在同一行中。所以我改變了這樣的CSS #photos。like，＃photos .date { float：right; font-size：1.2em; margin：0; 填充頂部：0.8em; text-transform：大寫; margin-left：5px; margin-top：50px; } –

歡迎！編譯器。 – SVS

的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/

現在設置爲根據佈局像保證金 * 填充 * 與或高度

來源

2012-06-05 11:35:21

我想你需要像這樣

http://jsfiddle.net/VwPna/

來源

2012-06-05 11:35:40

從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; 
}

同樣的方式，你可以給他們更多的風格。

來源

2012-06-05 11:37:01 Wazan

以下是在您提供的鏈接上製作的方式。

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%; 
}

你只需要翻譯，爲你的id，類別和形式，那麼你有它

來源

2012-06-05 11:41:46

沒有什麼特別的，他們」已經在參考網站上完成了。他們使用該圖像作爲div class="preview"的背景屬性。
這裏是（X）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; 
}

您可以隨時通過網站，並選擇在鼠標右鍵單擊隨時查看「View Page Source」或類似的東西，取決於你的瀏覽器:)

來源

2012-06-05 11:45:24 Havelock

顯示圖像的完美方式

回答

相關問題