如何使图像响应？

Question

我正在使用以下代码放大点击图片... 我曾尝试过css中的媒体..

http://www.frontendwebhelp.com/javascript/thumbnail-popup-to-large-image.php

但我在＃modalPopupHtml＃中增加了一个类来调整大图像的大小

.imgsize{
  height: 600px;
  width: 800px;
}

但是现在我想让大图像响应......当我在移动视图上测试代码时，它的工作时间不正常......我该怎么做才能使它完全适合移动屏幕... < / p>

Answer 1

将bootstrap类（ class =＆＃34; img-responsive＆＃34; ）添加到图像元素

Answer 2

试试这个

Max-width:100%;
height:auto;
display:block

Answer 3

.imgsize
{
max-width:100% !important;
height:auto;
display:block;
}

试试这个

Answer 4

通过在css文件中使用@media定义最小和最大宽度

＆＃13;

＆＃13;

    @media (max-width: px) 
{
.imgsize{  }
}
     @meida(min-width :px)
{
.imgsize{}
}

＆＃13;

＆＃13;

＆＃13;

根据您的尺寸定义px尺寸