Bootstrap如何根据图像使文本响应

Question

My scenario is like this : I have some texts and image inside the Container. 我的情况是这样的：我在容器中有一些文本和图像。 Both of them display correctly with different screen sizes. 它们都可以在不同的屏幕尺寸下正确显示。

However, it doesn't display to my expected result when I view it in Desktop. 但是，当我在桌面中查看它时，它没有显示出我期望的结果。

What I want to achieve is something similar to screenshot(Responsive). 我想要实现的是类似于屏幕截图（响应式）的东西。 Anyone know how to do that? 有人知道该怎么做吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <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.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<style>
p.solid {border-style: solid;}
</style>
<body>

<div class="container">
<p class="solid">A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.</p>

<p align="center"><img class="img-responsive" src="img/20161014_220509_073.jpg" /> </p>
</div>

</body>
</html>

Answer 1

actually, bootstrap should do that by its own, but here is the code: 实际上，引导程序应该自己执行此操作，但是代码如下：

of course, the max-width should be changed to your needs 当然，最大宽度应根据您的需要进行更改

 .container{ width:100%; max-width:500px; } .container img{ max-width:100%; height:auto; }

 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <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.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <style> p.solid {border-style: solid;} </style> <body> <div class="container"> <p class="solid">A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.</p> <p align="center"><img class="img-responsive" src="img/20161014_220509_073.jpg" /> </p> </div> </body> </html>

Answer 2

Try this code. 试试这个代码。 This would work on responsive too 这也会对响应有效

 .solid, .img-responsive { margin: 0 auto; display:table; }

 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <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.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <style> p.solid {border-style: solid;} </style> <body> <div class="container"> <p class="solid">A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.</p> <p align="center"><img class="img-responsive" src="img/20161014_220509_073.jpg" /> </p> </div> </body> </html>

Bootstrap如何根据图像使文本响应

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-11-02 08:09:57

解决方案2
1 2016-11-02 08:12:07

Bootstrap如何根据图像使文本响应

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-11-02 08:09:57

解决方案2 1 2016-11-02 08:12:07

解决方案1
1 已采纳 2016-11-02 08:09:57

解决方案2
1 2016-11-02 08:12:07