如何修复此代码?它不会缩放我的图像

Question

我有这段代码。它不会将我的图像缩放到这个大小。 高度和宽度不起作用。为什么？

在风格上.css我有这样一句话：

.gallery-popup .image-container img{width: 100%; height: auto; display: block;}

<div class="trace">
<img src="img/content/Imagesall/13347.jpg" height="250" width="250" alt="" />
<div class="tagline">
<div class="content">
<div class="title">TITLE</div>
<div class="description">TEXT</div>
</div>
</div>
</div>

<div class="overflow">
<div class="swiper-container" data-autoplay="0" data-loop="1" data-speed="500" data-center="0" data-slides-per-view="1">
<div class="swiper-w">
<div class="swiper-s"> 
<div class="image-container">
<img src="img/content/Imagesall/13347.jpg" height="250" width="250" alt="" />
<div class="description">
<div class="title">titletext</div>
<div class="text">texttexttext.</div>
</div>
</div>
</div>

Answer 1

没有任何 css 可以查看，这是<img>图像的响应式 css。为 img 指定宽度并将高度设置为自动。您不必在 html 中使用高度和宽度，只需使用 css 给出宽度

<div class="trace">
<img src="img/content/Imagesall/13347.jpg" alt="" />
.trace img {
width: ...;  /* use for example px or % */
max-width: 100%;
height: auto; /* this line to preserve width:height ratio */
border: 0; /* remove default border of img */
}