如何避免图像中出现空白?

时间:2018-08-12 14:08:44

标签: html css

我一直在做一个网站,当屏幕尺寸小于600像素时,我想避免用箭头指示的空白。该网站可在平板电脑,笔记本电脑和较大的设备上完美运行,但在较小的设备上会出现问题。 这是图片。 网站在大型设备上运行良好:

网站无法在较小的设备上运行:

这是我的CSS

.events {
	background-color: 	#F5F5F5;
	left: 0;
	right: 0;

}
.eone {
	box-shadow: 5px 5px 18px grey;
	margin-bottom: 5%;
}
.events h1 {
    margin-left: 3%;
    padding: 2%;
}
.content h2 {
	padding-top : 2%;
	padding-left: 2%; 
	color: #00ccff;	
	font-family: 'Lato', sans-serif;

}
.eone img {
	width: 100%;
}
.content p {
	font-size: 20px;
	padding-left: 2%;
	padding-bottom: 8%;	
}

.etwo {
	box-shadow: 5px 5px 18px grey;
	margin-bottom: 5%;
	margin-left: 20%;
}
.contenttwo h2 {
	padding-top : 2%;
	padding-left: 2%; 
	color: #00ccff;	
	font-family: 'Lato', sans-serif;
}
.etwo img {
	width: 100%;
}
.contenttwo p {
	font-size: 20px;
	padding-left: 2%;	
}
//media queries

Here is My html
  <div class="events">
    	   <h1>Events</h1>
    	  
    	 <div class="container">
    	  <div class="row">
    		<div class="col-md-5">
    			<div class="eone">
    			<img src="off.gif">
    		   <div class="content">
    			<h2>Monsoon Dhamaka!</h2>
    		      <p>This monsoon fly high with Gill Travels and at a price that will suit your pockets .Book a ticket now and avail upto <strong>50% Discount</strong> on ticket of Chandigarh to Malayasia.<strong>Also get discount of upto 60% on booking of four tickets together.</strong> </p>
    		  </div>
    	       </div>
    	   </div>
    		<div class="col-md-7">
    			<div class="etwo">
    			<img src="social.gif">
    		   <div class="contenttwo">
    			<h2>Earn Free Paytm Cash!</h2>
    		      <p>Sign up at our website to earn free paytm cash upto Rs.100. You may follow us on Facebook@ gillairtravel, Instagram @ gillairtravelpatiala, twitter @ and Suscribe our youtube channel @ gillairtravels to earn free paytm cash.<strong>Refer and earn upto Rs.2000 when a person buys a ticket.</strong></p>
    		  </div>
    	       </div>
    	   </div>
            </div>
           </div>
        </div>

请告诉我代码以解决此问题! 谢谢!

2 个答案:

答案 0 :(得分:1)

您是否尝试过此CSS:

@media屏幕和(最大宽度:800像素){

img {边距:0; padding:0}

}

答案 1 :(得分:0)

您应该修改.events类的宽度,添加“ width:100%;”。像这样的代码:

.events {
background-color:   #F5F5F5;
left: 0;
right: 0;
width: 100%;
}