如何在标题布局上执行响应式图像？

Question

我正在尝试使用bootstrap最新的响应式页面。我的页面布局如下所示：

正如您可以看到背面的图像和带有“Selling ....”的标题文字重叠，但是当您调整大小时，它会保持响应并且它变得混乱，请帮忙。

我的css：

<meta charset="utf-8">
    <title> | Home </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="//fonts.googleapis.com/css?family=Lato:100italic,100,300italic,300,400italic,400,700italic,700,900italic,900" rel="stylesheet" type="text/css">

    <!-- Le styles -->
    <link href=<?php echo base_url()."assets/css/bootstrap.min.css";?> rel="stylesheet">
    <link href=<?php echo base_url()."assets/css/bootstrap-responsive.css";?> rel="stylesheet"

Answer 1

如果没有媒体查询，确保图像缩放的最佳方法是使用width: 100%; height: auto;来强制其宽度达到其容器的大小。另一种方法是将图像包装在div容器中，然后使div响应overflow: hidden以切断溢出的图像的任何部分。这很不好看。

否则使用特定断点的媒体查询。如果您想要精确控制用户在特定尺寸下看到的图像部分，这几乎是唯一的方法。

如果我们能够看到图像的特定CSS以及它是如何搞砸的，我们可以提供更多有用的建议。

Answer 2

您是否将图片类设置为img-responsive？

<img class="img-responsive" src="myimage.jpg"/>