缩小浏览器站点时调整div内的图像大小

Question

当我减小浏览器窗口的大小时，我希望div中包含的图像调整大小并保留在框内。我尝试过使用position属性，但这已经破坏了我的布局。

此外，页面右上角的超链接当前设置为黑色，这是由CSS中的全局确定的。如何定义另一个不同颜色的元素。

非常感谢

＆＃13;

＆＃13;

body{
  font: 100%/1.5 Arial, Helvetica,sans-serif;
  padding:0;
  margin:0;
  background-color:white;
}


/* Style the list 'container'  */
ul.topnav {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
}

/* Float the list items left - this is the 'magic' that turns a vertical list into a horizontal row */
ul.topnav li {
  float: left;
}

/* style the links  */
ul.topnav li a {
 display: inline-block;
 color: white;
 text-align: center;

 text-decoration: none;
 transition: 0.3s;
 font-size: 100%;
}

/* hover */
ul.topnav li a:hover {
color: gold;
}


/* Hide the icon initially  */
ul.topnav li.icon {display: none;}














/* Global */
.container{
  width:60%;
  margin:auto;
  overflow:hidden;
  /* Allows the burger nav and branding to sit on the same line */


}

a{
  text-decoration: none;
  text-shadow: 50px;
  color: black;
}

a #class{
  color: red;

}



ul{
  margin:0;
  padding:0;
}

.subscribe{
  height:38px;
  background:gold;
  border:0;
  padding-left: 20px;
  padding-right:20px;
  color:black;
}

.dark{
  padding:25px;
  background:#35424a;
  color:white;
  margin-top:10px;
  margin-bottom:10px;
}


.maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
}
.maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }









/* Header **/
header{
  background:#35424a;
  color:white;
  padding-top:30px;
  min-height:70px;
  border-bottom:gold 5px solid;
}

header a{
  color:#ffffff;
  text-decoration:none;
  text-transform: uppercase;
  font-size:100%;
}

header li{
  float:left;
  display:inline;
  padding: 0 20px 0 20px;
}

header #branding{
  float:left;
}

header #branding h1{
  margin:0;
}

header nav{
  float:right;
  margin-top:10px;
}

header .highlight{
  color:gold;
}

header a:hover{
  color:gold;
}

h3 .bronze{
  color:#cc6633;

}

h3 .silver{
  color:silver;

}

h3 .gold{
  color:gold;

}






/* Showcase */
#showcase{
  min-height:400px;
  color:black;
}

#showcase h1{
  margin-top:50px;
  font-size:300%;
  margin-bottom:10px;
}

#showcase p{
  font-size:120%;
}
















/* Newsletter */
#newsletter{
  padding:15px;
  color:#ffffff;
  background:#35424a
}

#newsletter h1{
  float:left;
}

#newsletter form {
  float:right;
  margin-top:15px;
}

#newsletter input[type="email"]{
  padding:4px;
  height:26px;
  width:250px;
}



/* Sidebar */
aside#sidebar{
  float:right;
  width:25%;
  margin-top:10px;
}

aside#sidebar .quote input, aside#sidebar .quote textarea{
  width:90%;
  padding:5px;
}





/* Main-col */
article#main-col{
  float:left;
  width:70%;
}










/* Imagery */

#social {
  margin-top: 10%; 
    text-align: center;
    font-size: 150%;
    color: black;
}

#imagery {
  margin-top: 5%;
  margin-bottom: 5%;
}

#imagery .box {
float: right;
text-align: center;
width: 30%;
padding:10px;

}

#imagery .box i{
  font-size: 700%;
}

/* Create four equal columns that floats next to each other */
.column {
    float: left;
    width: 20%;
    padding: 10px;

}

.column img {
    margin-top: 12px;
    width: 100%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

.container .visuals{
  float: right;
}

.container .callus{
  float: right

}

#callus{

}







/* Services */
ul#services li{
  list-style: none;
  padding:20px;
  border: #cccccc solid 1px;
  margin-bottom:5px;
  background:#35424a;
  color: white;
}












footer{
  padding:20px;
  margin-top:20px;
  color:black;
  background-color:gold;
  text-align: center;
}


















/* Media Queries */
@media(max-width: 768px){
  header #branding,
  header nav,
  header nav li,
  #newsletter h1,
  #newsletter form,
  #boxes .box,
  article#main-col,
  aside#sidebar{
    float:none;
    text-align:center;
    width:100%;
  }

  header{
    padding-bottom:20px;
  }

  #imagery{
    font-size: 50%;
    float: none;
  }




  #showcase h1{
    margin-top:40px;
  }

  #newsletter button, .quote button{
    display:block;
    width:100%;
  }

  #newsletter form input[type="email"], .quote input, .quote textarea{
    width:100%;
    margin-bottom:5px;
  }






  /* nav */
 ul.topnav li {
  display: none;
}

ul.topnav li.icon {
 display: inline-block;
 }


ul.topnav.responsive {position: relative;}
 ul.topnav.responsive li.icon {
 position: absolute;
 right: 0;
 top: 0;
 }
 ul.topnav.responsive li {
 float: none;   /*  'un' float the list items so they return to displaying vertically */
 display: inline;
 }
 ul.topnav.responsive li a {
 display: block;
 text-align: left;
 }
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>DB Plumbing | About</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://use.fontawesome.com/3a2264e344.js"></script>
  <script src="html9shiv.js"></script>
  <link rel="shortcut icon" type="image/png" href="wrench.png"/>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <meta name="desciption" content = "Darran Brady Plumbing">
  <meta name="keywords" content = "Plumbing, Boilers, Showers, Central Heating, Kitchens, Bathrooms, Installations, Landlord Services, Horsham, West Sussex, Sussex,Barns Green, Billingshurst,Broadbridge Heath,Christ's Hospital, Clemsfold, Copsale,Colgate,Cowfold, Faygate, Handcross, Horsham, Itchingfield, Kingsfold,Lambs Farm,Lower Beeding,Mannings Heath, Maplehurst, Monks Gate, Nuthurst, Partridge Green, Pease Pottage, Roffey, Rowhook, Rusper, Rudgwick, Southwater, Slinfold, Warnham ">
  <meta name = "author" content ="DB, Darran, Brady, Darran Brady">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script>
function myFunction() {
 var x = document.getElementById("myTopnav");
 if (x.className === "topnav") {
 x.className += " responsive";
 } else {
 x.className = "topnav";
 }
}
</script>
</head>
  <body>
    <header>
      <div class="container">
        <div id="branding">
          <h1><span class="highlight">DB</span> Plumbing</h1>
        </div>
        <nav>
          <ul class="topnav" id="myTopnav">
            <li class="active"><a href="home9.html">Home</a></li>
            <li><a href="about9.html">About</a></li>
            <li><a href="services9.html">Services</a></li>
            <li><a href="coverage9.html">Coverage</a></li>
            <li><a href="contact9.html">Contact</a></li>
            <li class="icon">
 <a href="javascript:void(0);" style="font-size:200%;" onclick="myFunction()">☰</a>
        </li>
        </ul>
        </nav>
        </div>
        </header>

<div class="container">
      <div class="dark">
            <div class="callus"><a href="tel:+07756848657"><i class="fa fa-phone fa-2x" ></i></a></div>
 <h2>Our Story | Our Family</h2>
            </div>
            </div>

<section id="main">
      <div class="container">

        <article id="main-col">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius auctor lacus nec feugiat. Phasellus sit amet ex ipsum. Praesent pharetra tincidunt tempor. Etiam velit eros, dapibus eget porta in, lacinia et magna. Nam eget eros non orci consectetur congue at ac augue. Proin eget arcu in enim feugiat ultricies. Curabitur maximus metus nec metus pretium viverra at et orci. Integer hendrerit ante ut placerat cursus.
          </p>
          <p class="dark">
Aliquam eget pharetra diam. Nulla placerat lorem at turpis tempor, vel ultrices dui tincidunt. Proin quis egestas lorem. Mauris vehicula lectus odio, sit amet dictum justo feugiat a. Praesent id dictum lacus. Sed ullamcorper id erat ut dictum. Fusce porttitor lorem sapien, in aliquet sapien convallis et. Donec nec mauris nulla. Curabitur cursus semper odio, et hendrerit ante. Nunc at cursus ante. Maecenas gravida ligula ut efficitur suscipit. Nulla id turpis varius, pretium nunc sed, fermentum sem. Sed lacinia nunc non interdum pellentesque.
          </p>
        </article>

        <aside id="sidebar">
          <div class="dark">
           <a href="http://www.checkatrade.com/DBPlumbing/Reviews.aspx"><img src="cat.png" alt="checkatradelogo"></a>
          </div>
        </aside>
      </div>
    </section>



 <footer>
      <p>Darren Brady Plumbing Copyright &copy; 2017</p>
    </footer>
  </body>
</html>


























/*css reset
* {


  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
  background-image: url("bg.jpg");
  background-size: cover;  /*this seems better*/
  /*background-size: contain;

}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* end reset */

＆＃13;

＆＃13;

＆＃13;

Answer 1

你试过吗？

img {
 width:100%;
 height:auto;
}

它适用于我，并且img调整了div的大小，因为页面是响应的。

Answer 2

Mircea对图像是正确的，它提供的是图像，而不是背景图像。

至于你的黑色超链接，我猜测它是一个很棒的手机图标，您可以通过在样式表中设置类并相应地对其进行着色来改变它：

.fa fa-phone {
 color: (your colour)
}