Question

我试图使用未知大小的图像来适合窗口，图像或父div。我只想用百分比作为大小。

这是我的HTML：

<div>
    <img src="http://www.eastlines.ro/ro/wp-content/uploads/2014/11/Flag_map_of_Romania.svg_.png" />
</div>

这是我的css：

body, html{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
 }

div{
    max-width:70%;
    max-height:20%;
    border: dashed blue 4px;
    display:inline-block;
}

div img{
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
}

这是我的小提琴：https://jsfiddle.net/940fLtdb/

有人可以仅使用css和html建议解决方案吗？

没有滚动。没有身体滚动，没有div滚动。图像可以是1000x20或20x1000像素。

Answer 1

这很简单。您忘记添加height的{{1}}和width。 div和max-width必须得到max- height和height属性的支持。

width

body, html{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
 }

div{
    max-width:70%;
    min-height:20%;
    border: dashed blue 4px;
    display:inline-block;
}

div img{
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
}

Answer 2

根据您的要求，您有一个未知大小的响应式图像始终适合必须具有自己的相对大小的父容器，这意味着您基本上需要将图像设置为宽度/高度是父级的百分比大小，也设置为百分比宽度/高度。

在我们得到答案之前，让我解释为什么你当前的代码不起作用，为此你应该理解响应内容通常如何工作。

通常情况下，我们使用我们控制的内容，这意味着我们知道图像的确有多大。但是，我们可能希望该大小按比例放大或缩小，具体取决于它所显示的视口。所以，我们在CSS中写下这样的东西：

<application>

现在，我们遇到了您遇到的问题。如上所述，为了使宽度/高度响应起作用，它必须是固定值的百分比。但是，在您的场景中，您不知道将最小宽度或最大宽度设置为什么，因为图像的容器本身就是响应。

此处的解决方案是找出您想要将图像大小限制为绝对值的高度和宽度。

要做到这一点，我们需要JavaScript（用于计算），它将确定文档高度的20％以及文档宽度的70％（图像的父元素的最大高度和宽度）以绝对单位。

一旦我们有了这些绝对值，就不再需要在CSS中说出关于图像的任何内容了。它将扩展到其容器的100％：

img {

   /* Using an absolute size is used for this would prevent the image
      from being responsive:

   width: 300px; 

      So instead, the width or height (no need to set both because the
      default value for width and height is auto, meaning if you set the
      width the height will automatically adjust to keep the aspect ratio
      and vice versa.
   */


   /* By setting the width to a relative value, it's size can change       
      relative to its parent element's size:         
   */
   width:75%; 

   /* But, if the parent element's width is much larger or much smaller
      than usual, we can "cap" how big or small the image will get by 
      specifying an absolute value to cap it at:
   */
   min-width:100px;
   max-width:500px;
}

var img; 

// As soon as the document is fully loaded:
window.addEventListener("load", function(){

    // Get a reference to the image element
    img = document.querySelector("div > img");
    
    // Run function that sets min-width and max-width for imgage:
    getSize();
});

// If user changes viewport size, image needs to be adjusted
window.addEventListener("resize", function(){
  getSize(); 
});

function getSize(){
    // Get actual width and height of window in pixels, which is same as 100% 
    img.style.maxWidth = (window.innerWidth * .7) + "px";    
    img.style.maxHeight = (window.innerHeight * .2) + "px";
}

body, html{
    height:100%;
    margin:0px;
    padding:0px;
 }

div{
    max-width:70%;
    max-height:20%;
    border: dashed blue 4px;
  
    /* If you realy do need to have the width of the div
       shrink to the width of its content, then do use the
       next line, but without it, the width stays at 70% of
       the parent */
    /*display:inline-block;*/
}

使用css的百分比拟合图像

2 个答案: