HTML/CSS製作的3個圖像響應，精心設計

我試着作出很好地被內嵌顯示這些圖像，並根據屏幕大小而改變其位置/大小。這是我的HTML代碼：

<div class="row tryRow white"> 
    <div class="col-xs-4 portfolio-item leftPic"> 
    <div class="imgWrap"> 
     <img class="img-responsive" src="~/img/FMA.png" /> 
     <p class="imgDescription"> 
     Some text in here </p> 
    </div> 
    </div> 
    <div class="col-xs-4 portfolio-item centerPic">  
    <div class="imgWrap"> 
     <img class="img-responsive" src="~/img/SFK.png" /> 
     <p class="imgDescription"> 
      Some text in here 
     </p> 
     </div> 
    </div> 
    <div class="col-xs-4 portfolio-item rightPic">  
    <div class="imgWrap"> 
     <img class="img-responsive" src="~/img/CTG.png" /> 
     <p class="imgDescription"> 
     Some text in here </p>       
    </div> 
    </div> 
</div>

這些圖像在它們上面時會顯示一些文字。

這是一個圖像的CSS：

.leftPic { 
opacity:0.5; 
border-radius:4px; 
max-width: 33%; 
width:auto; 
}

正如你可以看到我想要的最大寬度設置爲33％，因爲我有每行3張圖片，但利潤率是不正確的，並說實話，這是一個很大的問題。

問題：爲了使它們縮小，根據瀏覽器重新定位，同時保持相對銳利的外觀。

來源

2016-05-10 Kelb56

等待，根據您使用Bootstrap的代碼。爲什麼你需要這樣做呢？只需使用類col-md-4，然後使用col-xs-12更小的設備。 –

它取決於瀏覽器的大小而縮小，如果屏幕像手機一樣製作的很好，但是我不能讓它在圖片之間有相同的空間，所有的圖片都會在左邊這意味着一切看起來都挺麻煩。您可以在原始文章中查看圖像，正如您所看到的，左上角的邊距與最後一張圖片之後的右邊不同，「我的項目中的幾個」位於中心位置，下方的圖像全部位於左側。 – Kelb56

添加plunkr /小提琴？ –

嗯...我想接近它以不同的方式設置background-image而不是使用HTML <img>的。正如你預料不錯的響應行爲和你的圖像是相當小的看看這個：

<div class="row"> 
    <div class="col-md-4"> 
     <div class="image image-1">Some text</div> 
    </div> 
    <div class="col-md-4"> 
     <div class="image image-2">Some text</div> 
    </div> 
    <div class="col-md-4"> 
     <div class="image image-3">Some text</div> 
    </div> 
</div> 

.image { 
    background-position: center center; 
    background-repeat: no-repeat; 
    -webkit-background-size: cover; 
    background-size: cover; 
    // height: control it with media queries 
} 

.image-1 { 
    background-image: url(path/to/image-1.jpg); 
} 

.image-2 { 
    background-image: url(path/to/image-2.jpg); 
} 

.image-3 { 
    background-image: url(path/to/image-3.jpg); 
}

這種做法也會給你更多的靈活性造型那些箱子的內容。

來源

2016-05-10 09:45:08 markoffden

我想這一個：

.tryRow{ display: inline-block;}

來源

2016-05-10 09:34:30 Ajinkya

這部分代碼已經在那裏Ajinkya – Kelb56

HTML/CSS製作的3個圖像響應，精心設計

回答

相關問題