響應式圖像調整大小問題

我在網站上到處尋找並嘗試了我遇到的每種方法，但仍然沒有獲得此圖像的響應和正確縮放的運氣。無論輸入什麼代碼，它都保持其默認大小。我調整瀏覽器大小並使用手機模擬器，並保持相同的大小。響應式圖像調整大小問題

HTML

<section class="image"> 
<div> 
<img class="info" src="jewelry-large-info.png"> 
</div> 
</section>

CSS

.image { 
display: -webkit-flex; 
display: flex; 
-webkit-justify-content: center; 
justify-content: center; 
} 
.info { 
height: auto; 
width: auto; 
max-width: 1500px; 
max-height: 666px; 
}

如果有人可以幫助將是非常理解，並有機會我可能剛纔忽略了什麼。

來源

2017-06-05 Jeff

你的實際問題是什麼？你從未在你的帖子中提到它，請編輯問題 – Huangism

'auto'與百分比不同。另外，在'section.image'內沒有額外的'div'，在這種情況下也沒有理由使用'-webkit'前綴。 –

好吧，我已經修復了這個問題，但圖片仍然沒有調整大小。 – Jeff

你需要做的是給圖像100％的寬度和自動的高度。這將使其保持成比例並與父母一樣寬。

來源

2017-06-05 20:02:58

這是我試過的東西，但由於某種原因，它會移動到屏幕的左側，仍然不能調整大小。 – Jeff

好的，由於某種原因，我認爲這是一個與我的頭一些代碼的問題，因爲我調整了一些東西，現在圖像正在縮小。 – Jeff

在CSS中，值'auto'是默認值。這不會以任何方式修改圖像的比例。在你的例子中，你使用了自動寬度和高度。這使圖像保持其原始尺寸。您可以在W3Schools上閱讀更多關於此的內容。

嘗試在寬度和高度上添加值以表示圖像的外觀。以下是您請求的響應式圖片的示例。

.image { 
 
    height: 100%; 
 
    width: auto; 
 
}

<img class="image" src="http://www.bultannews.com/files/fa/news/1395/11/16/671335_664.jpg" />

來源

2017-06-06 03:53:10

可能工作的另一個選項是嘗試Cloudinary的JavaScript庫，用於自動化響應的圖像。

首先，包括Cloudinary JavaScript庫在HTML頁面：

<script 
src="cloudinary-core-shrinkwrap.js" 
type="text/javascript"> 
</script>

設置img標籤參數

<img 
data-src="http://res.cloudinary.com/demo/image/upload/w_auto,c_scale/ 
smiling_man.jpg" 
class="cld-responsive">

，並調用Cloudinary響應方法：

<script type="text/javascript"> 
var cl = cloudinary.Cloudinary.new({cloud_name: "demo"}); 
// replace 'demo' with your cloud name in the line above 
cl.responsive(); 
</script>

的響應式方法會查找頁面中具有「cld-responsive」類名稱的所有圖像檢測頁面上圖像的可用寬度，然後相應地更新HTML圖像標籤。

看看他們的頁面描述這種方法 - http://cloudinary.com/documentation/responsive_images

來源

2017-06-13 12:23:59

響應式圖像調整大小問題

回答

相關問題