HTML：移动设备上的图片变得很小

Question

我遇到了麻烦，因为在移动设备上（或者在浏览器中放大很多时），图像变得很小。为什么会发生这种情况，我该如何解决？我的HTML和CSS如下：

HTML

<section id = "s" class = "s-section">
<div class = "center">
    <h1> Title Title Title Title Title  </h1>
    <img src = "img/hands01.jpeg" width = 50% max-width = 200% object-fit = cover class = "float-left" padding-right = "2">
    <div class = "s-paragraph">
        <p> Insert text here askdjfalksdflksa dflkasj dflkasj dlkf asdlkfj aslkdfj alskd flkas jdjflkas dlkf asdlkdf lakss dflkas sdflkas dlkf aslkdf lkask dflkas dsflk aslsdfaslkdf jaslkdfj lkasdj flkasj dflkas dlkfaslkdkf lksadj flkas dflkasj dlkf aslkdf asklsdjf lksaj jdflkas dlfkas lskdf aslkd fslkd lkasd flkasd jl</p>
    </div>
    <br>
</div>

CSS

.s-section {
  padding-top:8rem; 
  padding-bottom:5rem; 
  background:#ef9000;
}

.float-left {
  float: left;
  margin: 4px;
  padding-right: 2rem;
}

.s-paragraph {
  padding-top: 1rem;
}

.center {
  margin: auto;
  width: 60%;
  padding: 10px;
}

Answer 1

也许您应该使用媒体查询？

示例：

body{
  padding: 0;
  margin: 0;
}

@media only screen and (max-width : 320px) {
   img{
     width: 100%;
     height: auto;
   }
}

http://jsfiddle.net/ypuqfgek/7/

Answer 2

请尝试使用像素计数来定义它们，然后使用@Denys Brustovskyi提到的媒体查询，而不是使用％作为宽度

<img src = "img/hands01.jpeg" width = 50% max-width = 200% object-fit = cover class = "float-left" padding-right = "2">

像这样：

<img src = "img/hands01.jpeg" width = 200px max-width = 400px object-fit = cover class = "float-left" padding-right = "2">

您也可以尝试使用CSS：

.className {
background: url('filepathForPhoto.jpg');
background-size: cover;
width: 200px;
}

Answer 3

如果您不熟悉Web设计和开发，建议您先阅读一下here和here这些媒体查询。然后，当您至少对媒体查询有基本了解时，请转到grid systems in CSS。

一旦您掌握了所有这些知识，就将开始使用它构建内容- 移动响应式网络内容

如果您担心框架，请尝试使用grid-system only

如果您很勇敢或曾经使用过Web框架，则可以继续进行Bootstrap's Grid System

Bootstrap的常用示例如下：

<div class="container">
    <div class="row">
        <div class="col">
            // Your content goes here
        </div>
         <div class="col">
            // Your content goes here
        </div>
         <div class="col">
            // Your content goes here
        </div>
    </div>
</div>

<div class="col"></div>元素针对不同的视口具有不同的变化-一些示例-col-sm-2，col-lg-4，col-xl-12，其中字母“ col-”之后的内容是指视口的大小，其后的数字是指视口中获取的网格列的数量