如何確保我的圖片在我的網站上看起來清晰

-1

我目前正在處理我的投資組合，並且正處於從我的計算機添加圖像的階段。但是，當我上傳一張圖片時，只有看到我的不會更改我的html中的寬度/高度時，纔會看起來很清晰。而當我改變寬度/高度時，它會變得不穩定。如何確保我的圖片在我的網站上看起來清晰

這是有其寬度的圖像的一例/高度變化 -

這裏是圖像時我不改變寬度/高度 -

當前圖像我使用是JPEG和尺寸是1920×1044

我使用這種方法調整圖像 -

<img class="fade" src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image"style="width:250px;height:300px;" />

看看我的codepen看到更多。我現在在這裏使用佔位符圖片。 理想情況下，我想讓自己的照片像我的代碼簿上的照片一樣清晰。 - http://codepen.io/jordan_miguel/pen/gLwJRb?editors=1100

如果你不想讓它伸展，應用寬度和高度，保持圖像的長寬比。 – meagar

您的大小調整不成比例。如果您執行類似style="width:50%;"的操作，圖像將按比例顯示，但是按指定的大小百分比顯示。

2016-11-18 15:33:01 NotJay

您需要調整它的大小，並保持原始圖像的高寬比以避免拉伸。

例如：

<img class="fade aspect" src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image" />

CSS：

.aspect{ 
    height: 300px; //However tall you want it to be 
    width: auto; //Don't specify the pixels 
}

這也將工作：

.aspect{ 
    height: 300px; //However tall you want it to be 
    width: 100%; //Don't specify the pixels 
}

2016-11-18 15:37:43 Mia

似乎沒有調整圖像大小。 –

<img class="fade" src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image"style="width:250px;" />

自動正確的高度與寬度

`<img class="fade" src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image"style="height:300px;" />`

自動正確的寬度與高度

2016-11-18 15:38:04

回答