响应式图像调整问题

Question

我已经浏览过网站上的所有地方并尝试了我遇到过的每一种方法，但仍然没有任何运气让这个图像能够快速响应和缩放。无论我输入什么代码，它都保持默认大小。我调整浏览器大小并使用手机模拟器，它保持相同的大小。

HTML

package main

import (
    "fmt"
    "strings"
)

func RemoveQuotes(s string) string {
    result := ""
    arr := strings.Split(s, ",")
    for i:=0;i<len(arr);i++ {
       sub := strings.Replace(arr[i], "\"", "", -1)
       result = fmt.Sprintf("%s,\"%s\"", result, sub)
    }

    return result[1:]
}

func main() {
    a:= "\"test1\",\"test2\",\"tes\"t3\""
    fmt.Println(RemoveQuotes(a))
}

CSS

<section class="image">
<div>
<img class="info" src="jewelry-large-info.png">
</div>
</section>

如果有人能提供帮助，我将非常感激，很可能我可能只是忽视了一些事情。

Answer 1

您需要做的是为图像提供100％的宽度和自动的高度。这将使其保持成比例并且与父母一样宽。

Answer 2

在CSS中，值'auto'是默认值。这不会以任何方式修改图像的比例。在您的示例中，您使用auto作为宽度和高度。这使图像保持原始尺寸。您可以在W3Schools上了解详情。

尝试将宽度和高度的值添加到您希望图像的外观。以下是您请求的响应式图像的示例。

.image {
  height: 100%;
  width: auto;
}

<img class="image" src="http://www.bultannews.com/files/fa/news/1395/11/16/671335_664.jpg" />

Answer 3

另一个可能有用的选项是尝试使用Cloudinary的JavaScript库来自动生成响应式图像。

首先，在HTML页面中包含Cloudinary JavaScript库：

<script
src="cloudinary-core-shrinkwrap.js" 
type="text/javascript">
</script>

设置img标签参数

<img 
data-src="http://res.cloudinary.com/demo/image/upload/w_auto,c_scale/ 
smiling_man.jpg"   
class="cld-responsive">

并调用Cloudinary响应方法：

<script type="text/javascript">
var cl = cloudinary.Cloudinary.new({cloud_name: "demo"}); 
// replace 'demo' with your cloud name in the line above 
cl.responsive();
</script>

响应式方法会查找页面中具有＆＃34; cld-responsive＆＃34;的所有图像。类名，检测页面上图像的可用宽度，然后相应地更新HTML图像标记。

查看描述此方法的页面 - http://cloudinary.com/documentation/responsive_images

Answer 4

使用em个测量值

精彩阅读：Why Ems?

这是从我的代码中复制的，已解决问题：

HTML：

<div class="logo" >
  <img id="logo" alt="My Logo" src="logo_file.png"/>
</div>

CSS：

@media only screen and (max-width: 42em) {
  div.logo {
    width: 15em;
    display:block;
    margin:auto;
    padding-top: 0.2em;
  }
  img#logo {
    width: inherit;
    max-width: 100%;
    height: auto;
  }
}

将em的大小更改为所需的大小。