css - 如何在标题布局上做一个响应式图像？

Question

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

如您所见，背面的图像和带有“销售......” 的标题文本重叠，但是当你调整它的大小时，它不会保持响应并且它搞砸了，请帮助。

我的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 以及它是如何变得困惑的，我们可以提供更有帮助的建议。