如何在响应式网站的图像源中添加宽度？

时间：2018-04-22 09:11:04

标签： jquery html css html5 css3

我正在尝试学习css。所以我只是检查html页面并尝试通过自己实现 https://timesofindia.indiatimes.com/sports/cricket/ipl/live-blog/live-ipl-score-2018-mumbai-indians-vs-delhi-daredevils-match9-mumbai/amp_liveblog/63760697.cms

现在我面临一个问题，header图像响应（意味着它在移动视图中显示较小，在桌面中显示较大）。我可以制作此类内容

body {
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  border: 0;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  border: 0;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  webkit-text-size-adjust: none;
}

a {
  text-decoration: none;
}

.offwhitepattern {
  background-color: #eee;
}

.header {
  background: #af2c2c;
  padding: 10px 20px;
}

.fr {
  float: right;
}

.fl {
  float: left;
}

.topsocial {
  position: absolute;
  right: 20px;
  top: 11px;
}

.topsocial a {
  font-size: 11px;
  color: #fff;
  text-transform: uppercase;
}

.menu_icon {
  display: block;
  background-position: -70px -92px;
  background-image: url(https://static.toiimg.com/photo/52121907.cms);
  width: 30px;
  height: 24px;
  opacity: .8;
  background-size: 200px;
  position: relative;
  left: -6px;
}

.logoname {
  color: #fff;
  font-family: "Times New Roman", Times, serif;
  font-size: 21px;
}

.first_news {}

.top_new_header {
  padding: 0;
  margin: 0;
  background: linear-gradient(20deg, rgba(50, 150, 70, 1), rgba(0, 50, 100, .1)60%), linear-gradient(27deg, rgba(40, 50, 120, 1), rgba(20, 150, 100, .2) 60%), linear-gradient(120deg, rgba(10, 120, 20, 1), rgba(100, 100, 100, 0) 55%), linear-gradient(-80deg, rgba(0, 150, 0, 1), rgba(255, 255, 255, 1) 70%);
}

.info p {
  text-transform: uppercase;
  font-size: 0.7em;
  color: #fff;
}

.info {
  text-align: center;
}

.top_new_header {
  padding: 20px;
  margin: 0;
}

.info p:first-of-type {
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}

.image_heading {
  padding: 20px 0 0 0;
  margin: 0;
}

.image_heading .img_heading_div {
  width: 40%;
  border: 3px solid #fff;
  margin: 0px 15px 0px -23px;
  display: inline-block;
  box-sizing: border-box;
  height: 70px;
}

.img_heading_div img {
  width: 100%;
}

.image_heading h1 {
  width: calc(100% - 40%);
  color: #fff;
  box-sizing: border-box;
  vertical-align: top;
  display: inline-block;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <title>Title</title>
</head>

<body>
  <div id="container">
    <div class="offwhitepattern">
      <header>
        <div class="header">
          <div>
            <i class="menu_icon fl"></i>
            <h2>
              <a class="logoname">
                                TOI
                            </a>
            </h2>
          </div>
          <div class="topsocial fr">
            <a href="">share</a>
          </div>
        </div>
      </header>
      <div class="first_news">
        <div class="top_new_header">
          <div class="info">
            <p>Sports / IPL</p>
            <p>Times of India | Apr 19, 2018 | 22:03:25 IST</p>
          </div>
          <div class="image_heading">
            <div class="img_heading_div">
              <img src="https://static.toiimg.com/photo/msid-63716346/63716346.jpg?pl=63716346" />
            </div>
            <h1>Mumbai Indians vs Delhi Daredevils, Match 9, Mumbai</h1>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

如何在移动设备和桌面设备上制作不同的视图，就像在上面的链接中实现一样 https://timesofindia.indiatimes.com/sports/cricket/ipl/live-blog/live-ipl-score-2018-mumbai-indians-vs-delhi-daredevils-match9-mumbai/amp_liveblog/63760697.cms

enter image description here

在移动视图中看到我的image没有边框

enter image description here

在桌面视图border中查看，与web url

相比，高度更高

1 个答案:

答案 0 :(得分：0)

＆＃13;
＆＃13; 
body {
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  border: 0;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  border: 0;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  webkit-text-size-adjust: none;
}

a {
  text-decoration: none;
}

.offwhitepattern {
  background-color: #eee;
}

.header {
  background: #af2c2c;
  padding: 10px 20px;
}

.fr {
  float: right;
}

.fl {
  float: left;
}

.topsocial {
  position: absolute;
  right: 20px;
  top: 11px;
}

.topsocial a {
  font-size: 11px;
  color: #fff;
  text-transform: uppercase;
}

.menu_icon {
  display: block;
  background-position: -70px -92px;
  background-image: url(https://static.toiimg.com/photo/52121907.cms);
  width: 30px;
  height: 24px;
  opacity: .8;
  background-size: 200px;
  position: relative;
  left: -6px;
}

.logoname {
  color: #fff;
  font-family: "Times New Roman", Times, serif;
  font-size: 21px;
}

.first_news {}

.top_new_header {
  padding: 0;
  margin: 0;
  background: linear-gradient(20deg, rgba(50, 150, 70, 1), rgba(0, 50, 100, .1)60%), linear-gradient(27deg, rgba(40, 50, 120, 1), rgba(20, 150, 100, .2) 60%), linear-gradient(120deg, rgba(10, 120, 20, 1), rgba(100, 100, 100, 0) 55%), linear-gradient(-80deg, rgba(0, 150, 0, 1), rgba(255, 255, 255, 1) 70%);
}

.info p {
  text-transform: uppercase;
  font-size: 0.7em;
  color: #fff;
}

.info {
  text-align: center;
}

.top_new_header {
  padding: 20px;
  margin: 0;
}

.info p:first-of-type {
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}

.image_heading {
  padding: 20px 0 0 0;
  margin: 0;
}

.image_heading .img_heading_div {
  width: 40%;
  margin: 0px 15px 0px -23px;
  display: inline-block;
  box-sizing: border-box;
  height: 70px;
}

.img_heading_div img {
  width: 100%;
    border: 3px solid #fff;
}

.image_heading h1 {
  width: calc(100% - 40%);
  color: #fff;
  box-sizing: border-box;
  vertical-align: top;
  display: inline-block;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <title>Title</title>
</head>

<body>
  <div id="container">
    <div class="offwhitepattern">
      <header>
        <div class="header">
          <div>
            <i class="menu_icon fl"></i>
            <h2>
              <a class="logoname">
                                TOI
                            </a>
            </h2>
          </div>
          <div class="topsocial fr">
            <a href="">share</a>
          </div>
        </div>
      </header>
      <div class="first_news">
        <div class="top_new_header">
          <div class="info">
            <p>Sports / IPL</p>
            <p>Times of India | Apr 19, 2018 | 22:03:25 IST</p>
          </div>
          <div class="image_heading">
            <div class="img_heading_div">
              <img src="https://static.toiimg.com/photo/msid-63716346/63716346.jpg?pl=63716346" />
            </div>
            <h1>Mumbai Indians vs Delhi Daredevils, Match 9, Mumbai</h1>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

很简单。您已将边框添加到 .image_heading_div和.image_heading 。如果您只想将边框设置为图像，则必须单独为图像添加边框（ image_heading_div ）。 现在检查一下！我认为这就是你所需要的。

相关问题
最新问题