关于2-5编程问题

老师，请问article部分如何实现图片的长度占满全部。还有麻烦老师看看代码哪部分需要改改。谢谢老师：

<!DOCTYPE html>

<html>

<head>

<style>

margin: 0;

padding:0;

font-size: 14px;

}

.main{

position: relative;

width: 1200px;

height: 473px;

margin:34px auto 0;

}

.main h1{

font-size: 30px;

font-weight: lighter;

margin-bottom: 23px;

}

.main h1 > samp{

font-size: 30px;

color:#7c7c7c;

}

.main > aside{

width: 450px;

float: left;

}

.main > aside > dl{

position: relative;

margin-bottom: 17px;

display: block;

height: 74px;

}

.main > aside > dl > dt{

position: absolute;

top: -1px;

left: 80px;

font-size: 16px;

font-weight: bold;

line-height: 16px;

text-decoration: underline;

}

.main > aside > dl > dd:first-of-type{

position: absolute;

left: 0;

}

.main > aside > dl > dd:last-of-type{

position: absolute;

left: 76px;

top: 20px;

}

.main > aside > dl > dd >span{

position: absolute;

left: 15px;

color: #fff;

font-size: 30px;

font-weight: lighter;

line-height: 50px;

}

.main > article{

width: 720px;

float: right;

}

.main > article > p,

.main > article > img{

margin-bottom: 23px;

}

.main > article > img{

width: 100%;

}

</style>

</head>

<body>

<aside>

<h1>Recent <samp>Course</samp></h1>

<dl>

<dt>Hyper Text Markup Language</dt>

<dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.</dd>

</dl>

<dl>

<dt>Cascading Style Sheets</dt>

<dd>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.</dd>

</dl>

<dl>

<dt>JavaScript</dt>

<dd>JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd>

</dl>

<dl>

<dt>AngularJS</dt>

<dd>AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and...</dd>

</dl>

</aside>

<h1>Welcome to <samp>Massive Open Online Course!</samp></h1>

<p>We provide the latest knowledge to help you cope with the changing world!</p>

<p>We hope that all the students who love the Internet can be more convenient access to learning resources, using the Internet thinking to change our learning.</p>

<p>Focus on IT skills education MOOC, consistent with the development trend of the Internet down to earth's MOOC. We are free, we only teach useful, we concentrate on education.</p>

</article>

</section>

</body>

</html>

慕雪1434180 2018-01-16

源自：HTML5网页布局 2-6 html5页面布局（表现层_footer）

收起

2回答

提问者慕雪1434180 2018-01-16 22:33:32

老师，是这样的。

在css中，我把

.main > article > img{

width: 100%;

}中的width设置为100%之后，虽然大概可以满足，让图片占满整行，但是这样做使得它的高也变大了，于是，会使得article部分向下延伸，效果图如下：

而如果把width设置小一点，比如70%；这样会使得article虽然和aside一样高，但是不能使图片占满整行。效果图如下：

收起回答

小于飞飞 #1

你好，使用img标签插入的图片，宽度可以100%，高度可以指定固定值，但是这样会出现图片变形，所以如果只想显示图片一部分，可以使用背影图片，html 中的img 改为 div，样式如下： .main>article>div { background:url("http://img1.sycdn.imooc.com/climg//582e61180001ede703300130.jpg"); background-size:cover; width: 100%; height:100px; } 希望对有帮助，动手实践，加油！

2018-01-17 11:20:56