Question

我想在此模板上制作响应式图片： http://livedemo00.template-help.com/wt_57569/ 当您缩小页面时，图片会随之缩放。（如果我不明显的话，我正在谈论带管道的那个。）

感谢您的帮助。

Answer 1

将此添加到您的CSS：

img .responsive {
  max-width:100%;
  height: auto;
}

Answer 2

在您提供的示例中，它看起来像背景图像。所以你可以像下面那样设计样式

    @Entity
    @Table(name="staffregi_addressinfo")
    public class StaffRegiAddressInfo implements Serializable{


private static final long serialVersionUID = 1L;

@Id
@GeneratedValue(strategy=GenerationType.AUTO)
@Column(name="addressID")
private int addressID;

@Column(name="addressType")
private String addressType;

@Column(name="village")
private String village;

@Column(name="postOffice")
private String postOffice;

@Column(name="postalCode")
private String postalCode;

@Column(name="thanaName")
private String thanaName;

@Column(name="districtName")
private String districtName;

@Column(name="divisionName")
private String divisionName;

@Column(name="countryName")
private String countryName;

@Column(name="instituteID")
private String instituteID;

@Column(name="recordNote")
private String recordNote;

@Column(name="userExecuted")
private String userExecuted;

@Column(name="dateExecuted")
@Temporal(TemporalType.TIMESTAMP)
private Date dateExecuted;

@Column(name="ipExecuted")
private String ipExecuted;

@Column(name="recordStatus")
private int recordStatus;


@ManyToOne
@JoinColumn(name="staffID")
private StaffRegiBasicInfo basicInfoAddress;
    //setter, getter also...
   }

   @Entity
   @Table(name="staffregi_basicinfo")
   public class StaffRegiBasicInfo implements Serializable{

/**
 * 
 */
private static final long serialVersionUID = 1L;

@Id
@Column(name="staffID")
private String staffID;

@Column(name="staffName")
private String staffName;

@OneToMany(cascade=CascadeType.ALL, mappedBy="basicInfoAddress")
@LazyCollection(LazyCollectionOption.FALSE)
private Set<StaffRegiAddressInfo> addressInfoList;
//setter, getter also
}

Answer 3

正如我在示例页面上看到的那样，您需要一个可调整大小的“div”背景。示例代码:(将图片网址更改为您的）

<!DOCTYPE html>
<html>
<body>
  <div class="bg">
    <h2>Title</h2>
    <p>Text</p>
  </div>
</body>
<style>
   .bg{
      background-image: url("83741.jpg");
      background-repeat: no-repeat;
      background-size:100%;
      width:100%;
      height:300px;
   }
</style>
</html>

对于“宽度：100％”，在这种情况下，您可以使div始终适合页面的宽度（不完美，您应该将边距设置为零以实现完美贴合）。使用“background-size：100％”可以创建“响应”背景，高度应该是固定的，正如我们在您给出的示例中所看到的那样。

如何制作响应式图片

3 个答案: