CSS并不适用于图像

试图让CSS来适用于包含如下的图像（我已删除了其他HTML代码，以简化IT）：CSS并不适用于图像

<div class="wrap"> 
<main> 
    <article> 
    <img src="images/forest.jpeg" width="800px"> 
    </article> 
</main> 
</div>

目前试图按如下方式应用CSS：

.wrap img { 
    max-width: 100%; 
}

来源

2016-11-04 design-wizard

你想要什么输出。它已经适用于img –

它正在工作。 –

'max-width'对图像没有太大的作用，它就像一个宽度不应超过100％的条件。如果您试图将img的宽度设置为100％，则必须将宽度设置为100％，否则请告诉我们您期望看到什么，以及您看到了什么。 –

外观的CSS确实APPY这里

.wrap img{ 
 
    height: 400px; 
 
    border: 5px solid black; 
 
    border-radius: 10px; 
 
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5); 
 
    max-width: 100%; 
 
}

<div class="wrap"> 
 
<main> 
 
    <article> 
 
    <img src="http://sd.keepcalm-o-matic.co.uk/i-w600/keep-calm-400-level-loading-1.jpg" /> 
 
    </article> 
 
</main> 
 
</div>

来源

2016-11-04 06:20:43 Rahul

它似乎仍然不适用于我的图像。如果它有帮助'.wrap'是flex，所以它'主要'和'文章' –

@设计向导我试着用flex，它也适用于我，你的CSS文件正确链接到您的HTML，你有检查通过检查元素 – Rahul

我所有其他的样式都可以正常工作，但它不适用于特定的img。 –

因为内联css比其他人拥有更高的优先级。改变它想：

<img src="images/forest.jpeg"> 

.wrap img { 
    width:800px; 
    max-width: 100%; 
}

来源

2016-11-04 06:18:23 wscourge

快速修复

.wrap > main > article > img{max-width: 100% !important;}

来源

2016-11-04 06:21:33

这不会起作用，因为.wrap在他的情况下不是img的直接父母。 – wscourge

hmmm ..没错，我会编辑修正。 –

不过，只需要做.wrap img {// style}就足够了，不需要伪选择器。 – wscourge

CSS并不适用于图像

回答

相关问题