列内的图像不适合 320 像素屏幕
[英]The image inside the columns doesnt fit in the 320px screen
问题描述
How to wrap images responsively inside the columns.
如何在列内响应地包装图像。 The images doesn't fit inside the column and the screen of 360px.图像不适合列和 360 像素的屏幕。
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" type="text/css" href="css/custom.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> <meta name="viewport" content="width=device-width initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond|EB+Garamond|Great+Vibes" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="row"> <div class="col-xs-6 col-sm-4"><img src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853"></div> <div class="col-xs-6 col-sm-4"><img src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853"></div> <div class="col-xs-6 col-sm-4"><img src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853"></div> </div> <div class="row"> <div class="col-xs-6 col-sm-4"><img src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853"></div> <div class="col-xs-6 col-sm-4"><img src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853"></div> <div class="col-xs-6 col-sm-4"><img src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853"></div> </div> </body> </html>
3 个解决方案
解决方案1
0 2017-10-26 02:41:03
Set the max-width attribute on the images and they should fit nicely.在图像上设置max-width属性，它们应该很适合。
css: img{max-width:100%} css: img{max-width:100%}
Or, you can apply the style directly to the element.或者，您可以将样式直接应用于元素。 For example, change this:例如，改变这个：
<img src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853">
to this:对此：
<img style="max-width:100%" src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853">
解决方案2
0 2017-10-26 03:59:57
您需要像这样声明宽度和高度。
<img style="width:100%; height:auto;" src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853">
解决方案3
0 2017-10-26 04:54:40
add this style and your images should automatically fit which ever grid size you set, Avoid pixel in Grid unless you need a fix size try percentage like 20%, rest depends on your project添加此样式，您的图像应自动适合您设置的网格大小，避免在网格中使用像素，除非您需要固定大小尝试百分比，如 20%，其余取决于您的项目
<style>
body img{max-width:100%;width:100%;vertical-align:unset;text-align:center;}
</style>
That's it.就是这样。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
媒体查询320px及更少 - media query for 320px and less
@media（320px）无法与我的列配合使用，以使其宽度为100％ - @media (320px) not working with my columns to make them 100% width
绝对定位的子项应与其父项的大小相同，因为我在 320 像素和 767 像素屏幕宽度之间调整屏幕大小 - Absolute positioned child should be at the same size as its parent as im resizing the screen between 320px and 767px screen width
不需要的边框，宽约320px - Unwanted border around 320px wide div
320px 宽度设备上的左右神秘填充 - Mysterious padding left-right on 320px width device
媒体查询最大宽度320px问题 - media queries max width 320px issue
在非常小的视口（<320px）上缩放网站 - Scale a website on very small viewport (<320px)
CSS图像不适合屏幕 - CSS Image doesnt fit the screen
Cordova iOS模拟器仅显示320像素（我的内容为640像素） - Cordova iOS simulator only shows 320px (my content is 640px)
为什么移动设备上此网页上的内容小于等于 320 像素宽度而不是 100% 宽度？ - Why is the content on this webpage on a mobile device with smaller equal 320px width not 100% wide?
相关标签