列内的图像不适合 320 像素屏幕
[英]The image inside the columns doesnt fit in the 320px screen
问题描述
如何在列内响应地包装图像。 图像不适合列和 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
在图像上设置max-width属性，它们应该很适合。
css: img{max-width:100%}
或者，您可以将样式直接应用于元素。 例如，改变这个：
<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">
对此：
<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
添加此样式，您的图像应自动适合您设置的网格大小，避免在网格中使用像素，除非您需要固定大小尝试百分比，如 20%，其余取决于您的项目
<style>
body img{max-width:100%;width:100%;vertical-align:unset;text-align:center;}
</style>
就是这样。
@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
为什么移动设备上此网页上的内容小于等于 320 像素宽度而不是 100% 宽度？
[英]Why is the content on this webpage on a mobile device with smaller equal 320px width not 100% wide?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.