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}

投稿2019/12/23 06:06

総合スコア10429

2019/12/23 07:38

お忙しい中、お答えくださりありがとうございます。その方法がベストだと私も思うのですが、 max-width以外でも方法はありますか？

kyoya0819

2019/12/23 08:30

JavaScriptを使っていいなら可能です。

dream

2019/12/23 10:35

それでも構わないです。図々しいようですが、その方法も教えていただけないでしょうか？

kyoya0819

2019/12/23 10:52

追記しました。特定のクラスの画像だけに適用させたい場合は宣言部分を適当に書き換えてください。

dream

2019/12/23 11:08

ありがとうございます！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

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

関連した質問