最大宽度的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上工作

回答

相关问题