Html 响应显示百分比div内的图像

我一直在努力寻找答案。当我调整百分比div元素窗口的大小时，是否有任何可能的方法来响应显示图像元素

css

div{
    width:60%;
    height:400px;
}
div > img{
    width:100%;
    height:100%;
    min-height:100%;
    min-width:100%;
    background:tomato
}

html

<div>
    <img src="" alt="" />
</div>

---

谢谢

请用以下代码替换您的样式，然后再试一次

div > img {
  width: 100%;
  background: tomato;
}

---

您可以使用media Query设置不同高度和宽度设备的不同高度和宽度，如下所示

    @media screen and (max-width: 300px) {
        div {
            width:60%;
            height:150px;
        }
        img{
            width:60%;
            height:150px;
        }
    }
 @media screen and (max-width: 768px) {
        div {
            width:70%;
            height:450px;
        }
        img{
            width:60%;
            height:300px;
        }
    }

这里为两个不同的设备或屏幕区域指定了两个不同的样式表。第一个div和图像仅适用于最小宽度为300 px的设备/屏幕区域，另一个将适用于最小分辨率为768px的设备/屏幕区域

有关mediaquery的更多信息，请点击链接

---

使用

最大宽度：100%

div > img{
    max-width:100%;
    height:100%;
    min-height:100%;
    /*min-width:100%;*/
    background:tomato
}

div{
宽度：60%；
高度：400px；
}
div>img{
最大宽度：100%；
身高：100%；
最小高度：100%；
/*最小宽度：100%*/
背景：番茄；
}

CSS

---

jsiddle:

如果您试图使高度与宽度成比例收缩，我根本不会设置任何

高度

属性：

div > img{
    width:100%;
    min-width:100%;
    background:tomato
}

如果您真的想控制高度，我建议将一个简单的

vw

作为

height

值——假设父

div

真的占据了整个屏幕的宽度。然后指定一个固定的

最小高度

：

div > img{
    width:100%;
    height:60vw;
    min-height:60px;
    min-width:60px;
    background:tomato
}

---

在创建响应站点时，最好使用最大宽度：100%作为图像

最大宽度：100%不允许图像的宽度超过外部div的宽度及其自身的宽度，但如果您希望图像始终保持全宽，请使用

---

divimg{width:100%}

您可以使用js执行。不确定是否只使用css@PantherJs实际上不适合我的代码。。。。。仅仅使用css是不可能的吗？？？您能解释一下

响应式显示图像的含义吗？或者您想要的预期结果。可能重复？@codyogden否不是…为什么需要
min width
？因为div元素宽度与min heights响应请删除min width。我确实需要它，因为如果我删除我的元素width not show，那么width:100%是我这边的唯一选项，或者您应该选择svg图像因为如果你用%设置图像，那么高度或宽度需要根据这一点进行调整，如果px的不同分辨率将设置不同的外观，那么div可以是它需要的任何大小。图像上的最大宽度和最大高度才是最重要的。我不能使高度变小，那么背景不会改变。它应该根据div进行响应
div > img{
    width:100%;
    height:60vw;
    min-height:60px;
    min-width:60px;
    background:tomato
}