Question

主页面中有图像，默认页面中有图像，它们的大小不同，但是当浏览器中的页面查看时，默认页面的大小就像主页面中的图像大小一样。我做了CSS代码，它假设根据它们的大小显示图像，这里有一些奇怪的东西，我无法弄清楚它是什么！

母版页代码：

 <div class="navbar navbar-inverse navbar-fixed-top" style="height:106px"> <%--change header div size--%>
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" style="background-color:black" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="img" runat="server" href="~/"><img src="pic/photoHeader.jpg" width="200" height="70" /></a>
            </div>

默认页码：

<div class="container">
<div class="row">
    <div class="container1" style="width:67%; top: 0px; left: 0px;">
        <img name="slide" src="home1.jpg" width="500" height="400" />
    </div>
    <div class="col-xs-6" style="width:30%; color: #FF0000; text-decoration: underline; text-align: left;">
        <strong>Business Units</strong></div>
</div>

母版的CSS代码：

img {
  border-style: none;
border-color: inherit;
border-width: 0;
height: 70px;
width: 200px;

}

默认页面的CSS代码：

 .container1 {
    width: 50%;
    height: 50%;
}

.container1 img {
    width: 500px;
    height: 400px;
}

Answer 1

img css导致错误，因为img css更改了项目中的任何img，并且为了解决css中的img代码必须准确指定容器。

旧代码：

img {
border-style: none;
border-color: inherit;
border-width: 0;
height: 70px;
width: 200px;

新代码：

.container1 .img {
border-style: none;   
border-color: inherit;
border-width: 0;
width: 540px;
height:400px;

}

母版页中的img大小在默认页面中更改img大小

1 个答案: