如何在Div Box中正确拟合图像

时间：2016-12-11 19:11:10

标签： javascript jquery html css

我无法弄清楚如何将图像准确地放在盒子里面。我希望我的图像完全适合盒子，同时仍然显示边框。任何帮助，将不胜感激。正如你所看到的那样，图像非常小，而且我已经把代码弄乱了几个小时。

＆＃13;
＆＃13; 
>
＆＃13; 
$(document).ready(function() {
   $("#firstheader").fadeIn(2000);
   $("#titlep").fadeIn(2000);
});
＆＃13; 
#firstheader {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 20px;
  color: black;
  text-align: center;
  display: none;
}

#titlep {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 20px;
  color: black;
  text-align: center;
  display: none;
}

nav {
    text-align:center;
}
nav ul {
    margin: 0;
    padding: 0;
    display:inline-block;
    list-style: none;
    background-color: black;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ccc;
}
nav li {
    display:inline-block;
}
nav li a {
    display: block;
    padding: 5px 5px;
    font-size: 13px;
    text-decoration: none;
    color: white;
}


ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}
li {
  border: 1px solid black;
  display: inline-block;
}

#firstimage {
  width: 550px;
  height: 368px;
  border: 3px solid black;
  margin: 20px;
}

#firstimage > img {
  width: 200px;
  height : auto;
}
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：0)

将图片用作#firstimage的背景，然后移除img标记。使用background-size: cover;设置图像大小。

#firstimage {
  width: 550px;
  height: 368px;
  border: 3px solid black;
  margin: 20px;
  background-size: cover;
  background: url(http://www.freedigitalphotos.net/images/img/homepage/87357.jpg) no-repeat;
}

注意：图像会因为调整大小而模糊。此外，图像将被裁剪，因为保持高度/宽度比例，并且部分图像将在框外调整大小。

$(document).ready(function() {
  $("#firstheader").fadeIn(2000);
  $("#titlep").fadeIn(2000);
});
#firstheader {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 20px;
  color: black;
  text-align: center;
  display: none;
}
#titlep {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 20px;
  color: black;
  text-align: center;
  display: none;
}
nav {
  text-align: center;
}
nav ul {
  margin: 0;
  padding: 0;
  display: inline-block;
  list-style: none;
  background-color: black;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ccc;
}
nav li {
  display: inline-block;
}
nav li a {
  display: block;
  padding: 5px 5px;
  font-size: 13px;
  text-decoration: none;
  color: white;
}
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}
li {
  border: 1px solid black;
  display: inline-block;
}
#firstimage {
  width: 550px;
  height: 368px;
  border: 3px solid black;
  margin: 20px;
  background-size: cover;
  background: url(http://www.freedigitalphotos.net/images/img/homepage/87357.jpg) no-repeat;
}
<!DOCTYPE HTML>
<html>

<head>
  <title>Global HypeBeast</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
  <link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>

<body>
  <div id="firstheader">
    <h1>
    Street Fashion WORLDWIDE
  </h1>
  </div>
  <div id="titlep">
    <p>
      Welcome to Global HypeBeast, the best website for checking out street fashion from around the world.
    </p>
  </div>
  <nav>
    <ul>
      <li><a href="#">HOME</a>
      </li>
      <li><a href="#">LOCATIONS</a>
      </li>
      <li><a href="#">BRANDS</a>
      </li>
      <li><a href="#">FASHION</a>
      </li>
      <li><a href="#">CONTACT</a>
      </li>
    </ul>
  </nav>
  <div id="firstimage"></div>
</body>

</html>

答案 1 :(得分：0)

为img标记指定100%的百分比宽度和高度，如下所示：

#firstimage > img {
  width: 100%;
  height : 100%;
}

[但是，如果您想要保持图像宽高比，请将高度保留为auto，但如果框和图像的宽高比不同，您将在图像下方留下间隙。

检查下面的代码段以查看包含上述代码的图片：

＆＃13;
＆＃13; 
$(document).ready(function() {
   $("#firstheader").fadeIn(2000);
   $("#titlep").fadeIn(2000);
});
＆＃13; 
#firstheader {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 20px;
  color: black;
  text-align: center;
  display: none;
}

#titlep {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 20px;
  color: black;
  text-align: center;
  display: none;
}

nav {
    text-align:center;
}
nav ul {
    margin: 0;
    padding: 0;
    display:inline-block;
    list-style: none;
    background-color: black;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ccc;
}
nav li {
    display:inline-block;
}
nav li a {
    display: block;
    padding: 5px 5px;
    font-size: 13px;
    text-decoration: none;
    color: white;
}


ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}
li {
  border: 1px solid black;
  display: inline-block;
}

#firstimage {
  width: 550px;
  height: 368px;
  border: 3px solid black;
  margin: 20px;
}

#firstimage > img {
  width: 100%;
  height : 100%;
}
＆＃13; 
<!DOCTYPE HTML>
<html>
<head>
<title>Global HypeBeast</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
  </head>
  <body>
    <div id="firstheader">
  <h1>
    Street Fashion WORLDWIDE
  </h1>
    </div>
    <div id="titlep">
    <p>
      Welcome to Global HypeBeast, the best website for checking out street fashion from around the world. 
    </p>
    </div>
       <nav>
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">LOCATIONS</a></li>
        <li><a href="#">BRANDS</a></li>
        <li><a href="#">FASHION</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
    </nav>
    <div id="firstimage">
      <img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg">
    </div>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

您可以查看object-fit 

object-fit:contain


$(document).ready(function() {
   $("#firstheader").fadeIn(2000);
   $("#titlep").fadeIn(2000);
});
#firstheader {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 20px;
  color: black;
  text-align: center;
  display: none;
}

#titlep {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 20px;
  color: black;
  text-align: center;
  display: none;
}

nav {
    text-align:center;
}
nav ul {
    margin: 0;
    padding: 0;
    display:inline-block;
    list-style: none;
    background-color: black;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ccc;
}
nav li {
    display:inline-block;
}
nav li a {
    display: block;
    padding: 5px 5px;
    font-size: 13px;
    text-decoration: none;
    color: white;
}


ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}
li {
  border: 1px solid black;
  display: inline-block;
}

#firstimage {
  width: 550px;
  height: 368px;
  border: 3px solid black;
  margin: 20px;
}

#firstimage > img {
  width: 100%;
  height : 100%;
object-fit: contain;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Global HypeBeast</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
  </head>
  <body>
    <div id="firstheader">
  <h1>
    Street Fashion WORLDWIDE
  </h1>
    </div>
    <div id="titlep">
    <p>
      Welcome to Global HypeBeast, the best website for checking out street fashion from around the world. 
    </p>
    </div>
       <nav>
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">LOCATIONS</a></li>
        <li><a href="#">BRANDS</a></li>
        <li><a href="#">FASHION</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
    </nav>
    <div id="firstimage">
      <img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg">
    </div>
  </body>
</html>

object-fit:cover + overflow 

$(document).ready(function() {
   $("#firstheader").fadeIn(2000);
   $("#titlep").fadeIn(2000);
});
#firstheader {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 20px;
  color: black;
  text-align: center;
  display: none;
}

#titlep {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 20px;
  color: black;
  text-align: center;
  display: none;
}

nav {
    text-align:center;
}
nav ul {
    margin: 0;
    padding: 0;
    display:inline-block;
    list-style: none;
    background-color: black;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ccc;
}
nav li {
    display:inline-block;
}
nav li a {
    display: block;
    padding: 5px 5px;
    font-size: 13px;
    text-decoration: none;
    color: white;
}


ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}
li {
  border: 1px solid black;
  display: inline-block;
}

#firstimage {
  width: 550px;
  height: 368px;
  border: 3px solid black;
  margin: 20px;
  overflow:hidden;
}

#firstimage > img {
  width: 100%;
  height : 100%;
object-fit: cover
}
<!DOCTYPE HTML>
<html>
<head>
<title>Global HypeBeast</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
  </head>
  <body>
    <div id="firstheader">
  <h1>
    Street Fashion WORLDWIDE
  </h1>
    </div>
    <div id="titlep">
    <p>
      Welcome to Global HypeBeast, the best website for checking out street fashion from around the world. 
    </p>
    </div>
       <nav>
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">LOCATIONS</a></li>
        <li><a href="#">BRANDS</a></li>
        <li><a href="#">FASHION</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
    </nav>
    <div id="firstimage">
      <img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg">
    </div>
  </body>
</html>

您也可以指定min-height和min-width + overflow，这与object-fit:cover + overflow非常相似但旧浏览器可以理解

$(document).ready(function() {
   $("#firstheader").fadeIn(2000);
   $("#titlep").fadeIn(2000);
});
#firstheader {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 20px;
  color: black;
  text-align: center;
  display: none;
}

#titlep {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 20px;
  color: black;
  text-align: center;
  display: none;
}

nav {
    text-align:center;
}
nav ul {
    margin: 0;
    padding: 0;
    display:inline-block;
    list-style: none;
    background-color: black;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ccc;
}
nav li {
    display:inline-block;
}
nav li a {
    display: block;
    padding: 5px 5px;
    font-size: 13px;
    text-decoration: none;
    color: white;
}


ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}
li {
  border: 1px solid black;
  display: inline-block;
}

#firstimage {
  width: 550px;
  height: 368px;
  border: 3px solid black;
  margin: 20px;
  overflow:hidden;
}

#firstimage > img {
  min-width: 100%;
  min-height : 100%;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Global HypeBeast</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
  </head>
  <body>
    <div id="firstheader">
  <h1>
    Street Fashion WORLDWIDE
  </h1>
    </div>
    <div id="titlep">
    <p>
      Welcome to Global HypeBeast, the best website for checking out street fashion from around the world. 
    </p>
    </div>
       <nav>
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">LOCATIONS</a></li>
        <li><a href="#">BRANDS</a></li>
        <li><a href="#">FASHION</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
    </nav>
    <div id="firstimage">
      <img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg">
    </div>
  </body>
</html>

答案 3 :(得分：0)

最近的最佳做法是使用Bootstrap框架和SVG来维护解决方案。但是，您可以通过向标记添加样式属性来拉伸图像以适应：

<img style='height: 100%; width: 100%; object-fit: contain' src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg">
相关问题
最新问题