最大寬度的CSS屬性不能在DIV上工作

我想要限制用戶選擇的圖像的顯示大小，但我沒有運氣與我的CSS，我做錯了什麼？最大寬度的CSS屬性不能在DIV上工作

用戶可以選擇圖像並顯示圖像，但圖像顯示的是圖像的完整大小，因此在某些情況下，圖像的範圍遠遠超過網頁的可視區域。

<div id="wrapper"> 
    <input id="fileUpload" type="file" /> 
    <br /> 
    <div id="image-holder" style="width:100%;max-width:50px;height:auto;border:4px solid"></div> 
</div> 


@Styles.Render("~/Content/css/") 
@Scripts.Render("~/bundles/jquery") 


<script type='text/javascript'> 

    $(document).ready(function() { 
     $("#fileUpload").on('change', function() { 

      if (typeof (FileReader) != "undefined") { 

       var image_holder = $("#image-holder"); 
       image_holder.empty(); 

       var reader = new FileReader(); 
       reader.onload = function (e) { 
        $("<img />", { 
         "src": e.target.result, 
         "class": "thumb-image" 
        }).appendTo(image_holder); 

       } 
       image_holder.show(); 
       reader.readAsDataURL($(this)[0].files[0]); 
      } else { 
       alert("This browser does not support FileReader."); 
      } 
     }); 



    }); 

</script>

來源

2017-04-05 tbone

添加max-width: 100%到img，如果你希望它被限制於母公司的寬度。

<div style="max-width: 50px"> 
 
    <img style="max-width: 100%" src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
</div>

來源

2017-04-05 22:35:17

謝謝，這工作。是否有可能在html和/或jQuery中內聯CSS？當我嘗試它時，圖像不再顯示。 – tbone

@tbone肯定更新了答案。應該像任何其他內聯樣式或使用'$ .css（）'一樣工作。 –

美麗，謝謝！ – tbone

不是img標籤，將其設置爲背景大小的div的背景圖像：包含

<div class="imgDiv" style="background-image:url('some-img.png');"/> 

.imgDiv { 
    background-size:cover; 
    background-position:center center; 
    background-repeat:no-repeat 
}

這樣的造型會令它如此的背景大小包含在div的高度/寬度內，並且水平和垂直居中。

來源

2017-04-05 22:41:05 Maarten

最大寬度的CSS屬性不能在DIV上工作

回答

相關問題