减少浏览器站点时，调整DIV内的图像大小

Question

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

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

非常感谢

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;
 }
}

<!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:[phone]"><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 */

Answer 1

您是否尝试过？

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

它对我有效，并且IMG与DIV一起调整，因为该页面响应迅速。

Answer 2

mircea与图像合适，提供它是图像而不是背景图像。

至于您的黑色超链接，我猜这是可以通过在样式表中设置课程并相应地上色来更改的Fontawesome手机图标：

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