宽度:100%;使桌面上的图像大于原始尺寸
Posted
技术标签:
【中文标题】宽度:100%;使桌面上的图像大于原始尺寸【英文标题】:Width: 100%; making images on desktop bigger than original size 【发布时间】:2016-06-11 15:51:55 【问题描述】:我连续三张图片,宽度均为 323 像素。
为了让我的网站具有响应性,我已从 width: 323px;
切换到 width: 100%;
,这适用于移动设备,但在更大的浏览器上,图像会变得比原始尺寸大,因此会被拉伸和扭曲。
注意:我使用的是 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" 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" 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" 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" 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" 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" 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>
【问题讨论】:
你想要发生什么?您希望图像拉伸但不变形吗? 也许这会有所帮助:background-size:cover
.
使用width: 100%
,您告诉浏览器将图像的width
与其父div
的宽度相匹配,您可以指定class
到图像或添加div
它并使用@media
查询width: 323px
和width: 100%
来指定它的宽度到较小的设备。
【参考方案1】:
如果您希望图像具有响应性(即 100% 宽度)并且宽度仍不超过 323 像素,那么您可以使用 CSS max-width
属性。
.tripleimage
width: 100%;
max-width: 323px;
【讨论】:
多谢多谢,我知道最小宽度!也让我免于媒体查询。虽然如果在超大屏幕上观看,这些图像会显得非常小吗? 有可能,是的。最好使用可以缩小尺寸的足够大的图片,而不是如果为了获得最佳效果而将其放大后看起来模糊的小图片。如果您需要变通方法以获得更大的灵活性,请使用最小/最大值以获得最佳视图并使用媒体查询。 谢谢,我认为在这种情况下可能没有必要,因为我不知道将使用的最大屏幕尺寸,因此需要设置很多媒体查询。这在 99% 的情况下都非常有效。只是会议室风格的屏幕可能会造成问题。【参考方案2】:您需要使用 CSS 媒体查询来实现移动兼容性。首先将此元标记添加到您的 html 以使用媒体查询
<meta name="viewport" content="width=device-width, initial-scale=1">
现在,如果设备屏幕宽度小于 400px,您可以使用以下 css 代码应用自定义 css 规则。
@media screen and (max-width: 400px)
.tripleimage
width: 100%;
【讨论】:
我正在使用 Bootstrap 它会为我处理这个问题,我相信? 是的,但是如果您想在小型设备中添加填充或更改图像的大小,您需要自己的 css 规则。 谢谢,虽然我没有添加元标记,但工作得很好?它仍然有效。需要吗? 可能已经有一个了。因为 bootstrap 也使用媒体查询,并且没有该标签,媒体查询就无法工作。 谢谢,我们采用了最大宽度原则,因为它使我免于媒体查询。为所有帮助投了赞成票。以上是关于宽度:100%;使桌面上的图像大于原始尺寸的主要内容,如果未能解决你的问题,请参考以下文章
iPad (iOS6) 上的 Safari 无法缩放 HTML5 视频以填充 100% 的页面宽度