Question

我制作了一个图库，由两行组成，每一行都有树图像。我已经使我的网站响应，但由于某种原因，图像不会根据屏幕调整大小/调整。我已经附上了图片，并且可以看到图像无法调整到屏幕。 Screen shot of site

.image3 {
  height: 300px;
  width: 370px;
  border: 5px solid;
  color: grey;
}

<div class="wrapper">
  <div class="row">
    <img src="img/gallery1.jpg" alt="Iphone" class="image3">
    <img src="img/static1.squarespace2.jpg" alt="Iphone" class="image3">
    <img src="img/apple-iphone-8.jpg" alt="Iphone" class="image3"> 
  </div>
  <div class="row">
    <img src="img/iphone-8-concept.jpg" alt="Iphone" class="image3">
    <img src="img/gallery1.jpg" alt="Iphone" class="image3">
    <img src="img/gallery1.jpg" alt="Iphone" class="image3">
  </div>
</div>

Answer 1

图像不会调整大小，因为您为它们提供了绝对宽度。如果您为元素提供100％的max-width和max-height，那么它应该是响应式的。像这样：

＆＃13;

.image3 {
  max-height: 100%;
  max-width: 100%;
  border-style: solid;
  border-width: 5px;
  color: grey;
}

＆＃13;

<div class="row">
  <div class="wrapper">
    <img src="img/gallery1.jpg" alt="Iphone" class="image3" />
    <img src="img/static1.squarespace2.jpg" alt="Iphone" class="image3" />
    <img src="img/apple-iphone-8.jpg" alt="Iphone" class="image3" /> 
  </div>


  <div class="row">

    <img src="img/iphone-8-concept.jpg" alt="Iphone" class="image3" />
    <img src="img/gallery1.jpg" alt="Iphone" class="image3" />
    <img src="img/gallery1.jpg" alt="Iphone" class="image3" />

  </div>

＆＃13;

像素无法响应屏幕的大小

注意：请参阅以下MarioZ的回复

Answer 2

为什么会这样？

您可以使用

max-width: 100%; /* or 33% or whatever you need */

当屏幕宽度较小时让它缩小，但现在它总是你指定的大小。

“响应性”主要指的是针对不同的屏幕宽度设置不同的布局，从而为移动设备和桌面设备提供优化的布局。三张图片彼此相邻似乎不太敏感。相反，我会减少每行中的图像数量。

像这样：

.image3 {
  height: 300px;
  width: 370px;
  border-style: solid;
  border-width: 5px;
  color: grey;
}

<div class="row">
  <div class="wrapper">
    <img src="http://www.placecage.com/200/200" alt="Iphone" class="image3" />
    <img src="http://www.placecage.com/200/200" alt="Iphone" class="image3" />
    <img src="http://www.placecage.com/200/200" alt="Iphone" class="image3" /> 
    <img src="http://www.placecage.com/200/200" alt="Iphone" class="image3" />
    <img src="http://www.placecage.com/200/200" alt="Iphone" class="image3" />
    <img src="http://www.placecage.com/200/200" alt="Iphone" class="image3" />
  </div>
</div>

Answer 3

您似乎使用px单位为图片指定了固定尺寸。如果您希望图像具有响应性，要调整其大小，则需要使用相对单位。最常见的是：

相对于容器：percentaje ％
相对于容器字体大小： em
相对于根元素font-size： rem
相对于视口大小： vw 和 vh （相当于1％的视口措施）

您应该将每个图像包装在单个div class:wrapper中，并为div赋予相对宽度。

＆＃13;

html,body {
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

.image3 {
  display:block;
  max-height: 100%;
  max-width: 100%;
  width:100%;
  border-style: solid;
  border-width: 5px;
  color: grey;
}

.row {
  width:100%;
}

.wrapper {
  width: 33.33%;
  float:left;
}

＆＃13;

<div class="row">
  <div class="wrapper">
    <img src="https://placeimg.com/80/80/any" alt="Iphone" class="image3" />
  </div>
  <div class="wrapper">
    <img src="https://placeimg.com/120/120/any" alt="Iphone" class="image3" />
  </div>
  <div class="wrapper">
    <img src="https://placeimg.com/100/100/any" alt="Iphone" class="image3" />
  </div>
</div>


<div class="row">
  <div class="wrapper">
    <img src="https://placeimg.com/80/80/any" alt="Iphone" class="image3" />
  </div>
  <div class="wrapper">
    <img src="https://placeimg.com/120/120/any" alt="Iphone" class="image3" />
  </div>
  <div class="wrapper">
    <img src="https://placeimg.com/100/100/any" alt="Iphone" class="image3" />
  </div>
</div>

＆＃13;

使用css flexbox 或 grid 也许是一个好主意。

Answer 4

使用此代码。我在这里使用bootstrap ... 复制整个代码..并保存为page.html 然后检查。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
 <div class="row">
  <div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
  <img src="http://lorempixel.com/400/200/sports/" alt="" class="img-responsive">
 </div>  

  <div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
  <img src="http://lorempixel.com/400/200/sports/" alt="" class="img-responsive">
  </div>

   <div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
     <img src="http://lorempixel.com/400/200/sports/" alt="" class="img-responsive"> 
  </div>

</div>

  <div class="row">
    <div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
      <img src="http://lorempixel.com/400/200/sports/" alt="" class="img-responsive">
  </div>

    <div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
     <img src="http://lorempixel.com/400/200/sports/" alt="" class="img-responsive">
  </div>

    <div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
    <img src="http://lorempixel.com/400/200/sports/" alt="" class="img-responsive">
   </div>
  </div>
  </div> 

  </body>
 </html>

Answer 5

如果您希望图像具有响应性，则需要执行以下两项主要操作：

从不设置宽度和高度，只需设置宽度。
不使用像素来设置宽度使用百分比

在你的情况下，你有3张图像，所以在3中分成100％，约为33％，所以给图像的大小为33％（或者如果容器没有盒子尺寸则稍微减少：边框-box;）他们会很好地调整。

将图像调整为屏幕

5 个答案: