gpt4 book ai didi

html - 宽度 : 100%; making images on desktop bigger than original size

转载 作者:太空宇宙 更新时间:2023-11-03 23:03:11 25 4
gpt4 key购买 nike

我有三个连续的图像,宽度均为 323px。

为了让我的网站响应,我已经从 width: 323px; 切换到 width: 100%; 这适用于移动设备,但在更大的浏览器上图像变得比它们的原始大小因此被拉伸(stretch)和扭曲。

注意:我正在使用 Bootstrap

实时链接:http://185.123.96.102/~kidsdrum/moneynest.co.uk/

CSS

.tripleimage {
border-radius: 3px;
border: 1px solid #021a40;
padding: 1px;
margin-bottom: 15px;
width: 100%;
-webkit-box-shadow: 5px 5px 10px #A3A3A3;
-moz-box-shadow: 5px 5px 20px #A3A3A3;
box-shadow: 3px 3px 10px #A3A3A3;
}

HTML

<div class="container-fluid bg-3 text-center">    
<h3 class="h3big">What do you need help with?</h3><br>
<div class="row">
<div class="col-sm-4">
<img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/button-1.png" alt="button-1" class="middleimages">
<div class="box-content">
<p class="alltextbig text-uppercase"><b>Living</b> paycheque to paycheque?</p>
<figure><img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/pound-coins.jpg" alt="saving money image" title="Saving money" class="tripleimage">
<figcaption><b>Feel like you're walking on a tightrope every day?</b> <br>Stuck in a pay cheque to pay cheque cycle, can't keep your budget in check, dont have a budget, use credit cards or have no savings? <br><br>

<b>Lesson 1</b> - Learn how I escaped the pay cheque to pay cheque cycle.</figcaption>

</figure>


<input type="submit" value="Start Class Now" name="subscribe" id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-middle" style="margin-top: 11%">

</div>
</div>
<div class="col-sm-4 columnBorder">

<img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/button-2.png" alt="button-1" class="middleimages">
<div class="box-content column-border">
<p class="alltextbig text-uppercase"><b>Saving</b> to buy a home?</p>
<figure>
<img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/saving-to-buy-a-home.jpg" alt="Buying a house" title="Saving to buy a house" class="tripleimage"><figcaption><b>Is saving for a house causing you anxiety?</b> Stressed out over a correction or rise in interest rates?<br><br>
Worried if you don't buy now house prices will continue to rise and out price you?<br><br>
<b>Lesson 2</b> - Tips to rapidly save for your future home.
</figcaption>
</figure>

<input type="submit" value="Start Class Now" name="subscribe" id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-middle" style="margin-top: 6%">
</div>
</div>
<div class="col-sm-4">
<img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/button-3.png" alt="button-1" class="middleimages">
<div class="box-content">
<p class="alltextbig text-uppercase"><b>Want</b> to make more money?</p>
<figure>
<img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/going-travelling.jpg" alt="How to make more money" title="How to make more money" class="tripleimage">
<figcaption><b>Want to increase your income?</b>
<br>Want to drive a better car, go travelling or live in a better neighbourhood? Increase your income to scale up your savings and substantially improve your current lifestyle.

<br><br><b>Lesson 3</b> - It's not just about being frugal. How to easily increase your income without taking large risks.
</figcaption>
</figure>

<input type="submit" value="Start Class Now" name="subscribe" id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-middle">

</div>
</div>
</div>
</div>

最佳答案

如果您希望图像具有响应性(即 100% 宽度)并且仍然不超过 323 像素宽,那么您可以使用 CSS max-width 属性。

.tripleimage {
width: 100%;
max-width: 323px;
}

关于html - 宽度 : 100%; making images on desktop bigger than original size,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35685472/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com