定位html圖像與css相同

Question

是否有可能使這種情況與HTML相同，因爲我想使用<img>而不是background屬性。

什麼可以完全取代background-size,position等？

.post-img { 
     width: 380px; 
     height: 380px; 
     border-radius: 100%; 
     -webkit-border-radius: 100%; 
     -moz-border-radius: 100%; 
     background: url(../images/dsc_0016.jpg) no-repeat; 
     background-position: center; 
     background-size: cover; 
    } 

請幫忙。

Answer 1

我記得前一段時間我有同樣的問題。這就是爲什麼我快速回答。

但是你應該總是提供代碼與你先試的。

只需創建一個具有所需尺寸的div img-container。將你的圖像放在該div內。

<div class="img-container"> 
    <img src="path/to/image"> 
</div> 

然後添加CSS：

.img-container { 
    height: 380px; 
    width: 380px; 
} 

.img-container img { 
    display: block; 
    height: auto; 
    max-height: auto; 
    width: 100%; 
} 

類似的東西應該做的工作。可能需要一點tweeking。但是，這應該給你一個想法如何去做...