DIV:CSS无法重新缩放图像

时间:2015-09-07 04:00:09

标签: css html5

我正在尝试重新调整以下div的图像,但CSS样式没有任何效果。

div标签:

            <article id="article_1">
            <div id="div_article_1_fleche_haut">
                <img src="images/haut.png" />
            </div>
            <div id="div_article_1_central">
                <div id="div_article_1_central_fg">
                    <img src="images/gauche.png" />                         
                </div>
                <div id="div_article_1_central_carte">  
                    <img src="images/r500_0.gif">
                </div>
                <div id="div_article_1_central_fd">
                    <img src="images/droite.png" />                                         
                </div>                          
            </div>              
            <div id="article_1_fleche_bas">
                <img src="images/bas.png" />                                            
            </div>              
        </article>

CSS文件:

 #div_header_main {
    width: 90%;
    overflow:hidden; /**/
    border: thin solid black;   
    padding: 5px 10px 0px 5px;
}

#div_header_left {
    width: 800px;
    float:left;
}

#div_header_right {
    width: 300px;
    float:right;
}

#div_header_right img
{
    float:right;
    clear:right;
    padding: 10px 0 0 0px;
    border: thin solid black;
    height:80px;
}​

#div_article_1_central_carte img
{
    height: 25px;
}​

这是jsfiddle文件:

http://jsfiddle.net/e7gvbz66/3/

2 个答案:

答案 0 :(得分:0)

请在CSS文件中包含这样的样式,然后img的样式将正确应用。

#div_article_1_central_carte {
    
}

答案 1 :(得分:0)

我已经在jsfiddle.net/e7gvbz66/8/上更新了你的CSS文件,现在工作正常。您的CSS文件中存在不必要的字符,我已删除并添加了一些样式以显示更改。

&#13;
&#13;
#div_header_main {
	width: 90%;
	overflow:hidden; 
	border: thin solid black;	
	padding: 5px 10px 0px 5px;
}
	
#div_header_left {
	width: 800px;
	float:left;
}

#div_header_right {
	width: 300px;
    float:right;
}

#div_header_right img
{
    float:right;
    clear:right;
	padding: 10px 0 0 0px;
	border: thin solid black;
	height: 80px;
    /*added for testing*/
    width: 40px;
}

#div_article_1_central_carte img
{
    /*updated for testing*/
    height: 55px;
    width: 100px;
}

#div_article_1_central_carte
{

}
&#13;
&#13;
&#13;