width: 100%;で画像を拡大しても一定のサイズでとどまるようにしたい。

現在、swiper.jsを使用して簡易スライダーを作ったのですが、
その中の画像を原寸サイズを超えない程度にwidth: 100%;を利用して
拡大したいのですが、具体的な方法がわからなくて困っています。
どうか救いの手を差し伸べて下さい。

HTML5
1コード         <div class="swiper-container">
2          <div class="swiper-wrapper">
3            <figure class="swiper-slide"><a href="images/isonoya-top.jpg" data-lity="data-lity"><img
4                  src="images/isonoya-top.jpg"alt="Photo2" class="isono"></a></figure>
5            <figure class="swiper-slide"><a href="images/mothersday.jpg" data-lity="data-lity"><img
6                  src="images/mothersday-thum.jpg"alt="Photo3" class="mother"></a></figure>
7          </div>
8          <div class="swiper-pagination"></div>
9          <div class="swiper-button-prev"></div>
10          <div class="swiper-button-next"></div>
11
12      </div>

CSS3
1コード .swiper-wrapper {
2    margin-top: 34px;
3    z-index: 30;
4    padding-bottom: 30px;//元々50px
5    // height: 361px;
6    // position: relative;
7}
8
9.swiper-wrapper>figure {
10    width: 680px;
11}
12
13.isono {
14    width: 100%;
15    // max-width: 100%;
16    height: auto;
17}
18.mother {
19    width: 100%;
20    // max-width: 100%;
21    height: auto;
22}

行動規範の内容に同意します

回答1件

ベストアンサー

max-width:画像の横幅;をご利用ください。

MDN

imgタグすべてに同一のスタイルを適用するものとしています。

JavaScript
1const elements = document.getElementsByTagName('img');
2for(i=0;i<elements.length;i++){
3  if(elements[i].naturalWidth > elements[i].parentNode.clientWidth){
4    elements[i].style.width = '100%';
5  } else {
6    elements[i].style.width = elements[i].naturalWidth + 'px';
7  }
8}