我似乎无法摆脱屏幕底部的大灰色条，我还希望图像能够根据网络浏览器大小调整大小。非常感谢所有帮助。提前致谢
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="responsive no-js lt-ie9 lt-ie8 lt-ie7" lang="en-US"> <![endif]-->
<!--[if IE 7]> <html class="responsive no-js lt-ie9 lt-ie8" lang="en-US"> <![endif]-->
<!--[if IE 8]> <html class="responsive no-js lt-ie9" lang="en-US"> <![endif]-->
<html class="responsive no-js" lang="en-US">
<head>
<meta charset="utf-8">
<title>24FitClub | Our 24 Fit Club concept is the vehicle to drive you to achieving the best shape of your life</title>
<meta name="viewport" content="width=device-width, height=100%, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="http://whoathemes.com/files/pics/favicons/xlander/favicon.ico" />
<link rel="apple-touch-icon" href="http://whoathemes.com/files/pics/favicons/xlander/favicon_57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="http://whoathemes.com/files/pics/favicons/xlander/favicon_72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="http://whoathemes.com/files/pics/favicons/xlander/favicon_114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="http://whoathemes.com/files/pics/favicons/xlander/favicon_144.png" />
<!--[if lt IE 10]>
<style type="text/css">
html:not(.is_smallScreen) .wt_animations .wt_animate { visibility:visible;}
</style>
<![endif]-->
<link rel="alternate" type="application/rss+xml" title="24FitClub » Feed" href="http://thenutritioncoachuk.com/24FitClub/index.php/feed/" />
<link rel="alternate" type="application/rss+xml" title="24FitClub » Comments Feed" href="http://thenutritioncoachuk.com/24FitClub/index.php/comments/feed/" />
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/thenutritioncoachuk.com\/24FitClub\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2.2"}};
!function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g;c.supports={simple:d("simple"),flag:d("flag")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel='stylesheet' id='wt-extend-bx-slider-css' href='http://thenutritioncoachuk.com/24FitClub/wp-content/themes/beautifulhomes/framework/shortcodes/assets/lib/css/jquery.bxslider.css?ver=4.2.2' type='text/css' media='all' />
<link rel='stylesheet' id='rs-plugin-settings-css' href='http://thenutritioncoachuk.com/24FitClub/wp-content/plugins/revslider/rs-plugin/css/settings.css?ver=4.6.5' type='text/css' media='all' />
<style id='rs-plugin-settings-inline-css' type='text/css'>
.tp-caption a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}.largeredbtn{font-family:"Raleway",sans-serif;font-weight:900;font-size:16px;line-height:60px;color:#fff !important;text-decoration:none;padding-left:40px;padding-right:80px;padding-top:22px;padding-bottom:22px;background:rgb(234,91,31); background:-moz-linear-gradient(top,rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(234,91,31,1)),color-stop(100%,rgba(227,58,12,1))); background:-webkit-linear-gradient(top,rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%); background:-o-linear-gradient(top,rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%); background:-ms-linear-gradient(top,rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%); background:linear-gradient(to bottom,rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea5b1f',endColorstr='#e33a0c',GradientType=0 )}.largeredbtn:hover{background:rgb(227,58,12); background:-moz-linear-gradient(top,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(227,58,12,1)),color-stop(100%,rgba(234,91,31,1))); background:-webkit-linear-gradient(top,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%); background:-o-linear-gradient(top,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%); background:-ms-linear-gradient(top,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%); background:linear-gradient(to bottom,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e33a0c',endColorstr='#ea5b1f',GradientType=0 )}.fullrounded img{-webkit-border-radius:400px;-moz-border-radius:400px;border-radius:400px}
</style>
<link rel='stylesheet' id='js_composer_front-css' href='http://thenutritioncoachuk.com/24FitClub/wp-content/plugins/js_composer/assets/css/js_composer.css?ver=4.4.3' type='text/css' media='all' />
<link rel='stylesheet' id='theme-boostrap-css' href='http://thenutritioncoachuk.com/24FitClub/wp-content/themes/beautifulhomes/css/bootstrap.css' type='text/css' media='all' />
<link rel='stylesheet' id='theme-style-css' href='http://thenutritioncoachuk.com/24FitClub/wp-content/themes/beautifulhomes/css/main.css' type='text/css' media='all' />
<link rel='stylesheet' id='wt-visual-composer-extensions-front-css' href='http://thenutritioncoachuk.com/24FitClub/wp-content/themes/beautifulhomes/framework/shortcodes/assets/wt-visual-composer-extensions-front.css' type='text/css' media='all' />
<link rel='stylesheet' id='theme-awesome-css' href='http://thenutritioncoachuk.com/24FitClub/wp-content/themes/beautifulhomes/css/font-awesome.css' type='text/css' media='all' />
<link rel='stylesheet' id='theme-entypo-css' href='http://thenutritioncoachuk.com/24FitClub/wp-content/themes/beautifulhomes/css/entypo-fontello.css' type='text/css' media='all' />
<link rel='stylesheet' id='theme-lightbox-css' href='http://thenutritioncoachuk.com/24FitClub/wp-content/themes/beautifulhomes/css/prettyPhoto.css' type='text/css' media='all' />
<link rel='stylesheet' id='theme-media-styles-css' href='http://thenutritioncoachuk.com/24FitClub/wp-content/themes/beautifulhomes/css/main-media.css' type='text/css' media='all' />
<link rel='stylesheet' id='theme-green-css' href='http://thenutritioncoachuk.com/24FitClub/wp-content/themes/beautifulhomes/css/skins/green.css' type='text/css' media='all' />
<link rel='stylesheet' id='theme-skin-css' href='http://thenutritioncoachuk.com/24FitClub/wp-content/themes/beautifulhomes/cache/skin.css?ver=4.2.2' type='text/css' media='all' />
<link rel='stylesheet' id='font|Open%20Sans:400,300italic,800italic,800,700italic,700,600italic,600,400italic,300-css' href='http://fonts.googleapis.com/css?family=Open+Sans%3A400%2C300italic%2C800italic%2C800%2C700italic%2C700%2C600italic%2C600%2C400italic%2C300&subset=latin%2Clatin-ext&ver=4.2.2' type='text/css' media='all' />
<link rel='stylesheet' id='font|Oswald:400,300,700-css' href='http://fonts.googleapis.com/css?family=Oswald%3A400%2C300%2C700&subset=latin%2Clatin-ext&ver=4.2.2' type='text/css' media='all' />
<script type='text/javascript' src='http://thenutritioncoachuk.com/24FitClub/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
<script type='text/javascript' src='http://thenutritioncoachuk.com/24FitClub/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://thenutritioncoachuk.com/24FitClub/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.tools.min.js?ver=4.6.5'></script>
<script type='text/javascript' src='http://thenutritioncoachuk.com/24FitClub/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.revolution.min.js?ver=4.6.5'></script>
<script type='text/javascript' src='http://thenutritioncoachuk.com/24FitClub/wp-content/themes/beautifulhomes/js/vendor/modernizr-2.6.1.min.js'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://thenutritioncoachuk.com/24FitClub/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://thenutritioncoachuk.com/24FitClub/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 4.2.2" />
<script type="text/javascript">
jQuery(document).ready(function() {
// CUSTOM AJAX CONTENT LOADING FUNCTION
var ajaxRevslider = function(obj) {
// obj.type : Post Type
// obj.id : ID of Content to Load
// obj.aspectratio : The Aspect Ratio of the Container / Media
// obj.selector : The Container Selector where the Content of Ajax will be injected. It is done via the Essential Grid on Return of Content
var content = "";
data = {};
data.action = 'revslider_ajax_call_front';
data.client_action = 'get_slider_html';
data.token = '1f054b7c6e';
data.type = obj.type;
data.id = obj.id;
data.aspectratio = obj.aspectratio;
// SYNC AJAX REQUEST
jQuery.ajax({
type:"post",
url:"http://thenutritioncoachuk.com/24FitClub/wp-admin/admin-ajax.php",
dataType: 'json',
data:data,
async:false,
success: function(ret, textStatus, XMLHttpRequest) {
if(ret.success == true)
content = ret.data;
},
error: function(e) {
console.log(e);
}
});
// FIRST RETURN THE CONTENT WHEN IT IS LOADED !!
return content;
};
// CUSTOM AJAX FUNCTION TO REMOVE THE SLIDER
var ajaxRemoveRevslider = function(obj) {
return jQuery(obj.selector+" .rev_slider").revkill();
};
// EXTEND THE AJAX CONTENT LOADING TYPES WITH TYPE AND FUNCTION
var extendessential = setInterval(function() {
if (jQuery.fn.tpessential != undefined) {
clearInterval(extendessential);
if(typeof(jQuery.fn.tpessential.defaults) !== 'undefined') {
jQuery.fn.tpessential.defaults.ajaxTypes.push({type:"revslider",func:ajaxRevslider,killfunc:ajaxRemoveRevslider,openAnimationSpeed:0.3});
// type: Name of the Post to load via Ajax into the Essential Grid Ajax Container
// func: the Function Name which is Called once the Item with the Post Type has been clicked
// killfunc: function to kill in case the Ajax Window going to be removed (before Remove function !
// openAnimationSpeed: how quick the Ajax Content window should be animated (default is 0.3)
}
}
},30);
});
</script>
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
<meta name="generator" content="Powered by Visual Composer - drag and drop page builder for WordPress."/>
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="http://thenutritioncoachuk.com/24FitClub/wp-content/plugins/js_composer/assets/css/vc-ie8.css" media="screen"><![endif]--><style type="text/css">.mc4wp-form input[name="_mc4wp_required_but_not_really"] { display: none !important; }</style><noscript><style> .wpb_animate_when_almost_visible { opacity: 1; }</style></noscript></head>
<body class="home blog wt_onepage_theme wt_no_space wt_image_bg wpb-js-composer js-comp-ver-4.4.3 vc_responsive" >
<div id="wt_wrapper" class=" fullWidth wt_stickyHeader wt_bcrumbs_enabled wt_nav_top clearfix">
<div id="wt_page" class="wt_wide">
<div id="wt_headerWrapper" role="banner" class="clearfix"><header id="wt_header" class="wt_resp_nav_under_767 navbar navbar-fixed-top responsive_nav clearfix" role="banner"> <div class="container">
<div id="logo" class="navbar-header">
<a class="navbar-brand" href="http://thenutritioncoachuk.com/24FitClub/"><img src="http://thenutritioncoachuk.com/24FitClub/wp-content/uploads/2015/06/logo24.png" alt="" /></a>
</div>
<!-- Navigation -->
</ul>
</div> <!-- End container -->
</header> <!-- End header -->
</div> <!-- End headerWrapper -->
<div id="wt_containerWrapper" class="clearfix">
<div id="wt_containerWrapp" class="clearfix">
<section id="wt_section_home" class="wt_section_area">
<div id="wt_home_content">
<div class="container">
<div class="row">
<div class="wt-row-container"><div class="vc_row wpb_row vc_row-fluid " >
<div class="vc_col-sm-12 vc_hidden-md vc_hidden-sm vc_hidden-xs wpb_column vc_column_container">
<div class="wt_wpb_wrapper clearfix" >
<div id="wt_spacer_sc-56694" class="wt_spacer_sc wt_clearboth" style="height:130px; line-height:130px;"></div>
</div>
</div>
</div></div><div class="wt-row-container"><div class="vc_row wpb_row vc_row-fluid " >
<div class="vc_col-sm-12 wpb_column vc_column_container">
<div class="wt_wpb_wrapper clearfix" >
</div>
</div>
</div></div><div class="wt-row-container wt-row-centered"><div class="vc_row wpb_row vc_row-fluid " ><div class="container"><div class="row">
<div class="vc_col-sm-12 vc_col-lg-7 vc_col-md-7 wpb_column vc_column_container">
<div class="wt_wpb_wrapper clearfix" >
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<h1>REGISTER NOW FOR</h1>
</div>
</div>
<div class="wpb_single_image wpb_content_element vc_align_left">
<div class="wpb_wrapper">
<div class="vc_single_image-wrapper vc_box_border_grey"><img width="763" height="134" src="http://thenutritioncoachuk.com/24FitClub/wp-content/uploads/2014/12/24FIT_CLUB-landscape.png" class="vc_single_image-img attachment-large" alt="24FIT_CLUB landscape" /></div>
</div>
</div>
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<h1>COMPLETELY FREE</h1>
</div>
</div>
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<h2>4 WEEK CHALLENGE </h2>
</div>
</div>
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<h3>MONDAY, WEDNESDAY & FRIDAY, 6:30AM & 7PM </h3>
</div>
</div>
</div>
</div>
<div class="vc_col-sm-12 vc_col-lg-5 vc_col-md-5 wpb_column vc_column_container">
<div class="wt_wpb_wrapper clearfix" >
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<div role="form" class="wpcf7" id="wpcf7-f1125-o1" lang="en-US" dir="ltr">
<div class="screen-reader-response"></div>
<form name="" action="insert.php" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="1125" />
<input type="hidden" name="_wpcf7_version" value="4.2" />
<input type="hidden" name="_wpcf7_locale" value="en_US" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f1125-o1" />
<input type="hidden" name="_wpnonce" value="46263cb454" />
</div>
<h4>Sign up to find out when your next 4 week challenge is</h4>
<p><span class="wpcf7-form-control-wrap yourname"><input type="text" name="yourname" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Full Name" /></span> </p>
<p><span class="wpcf7-form-control-wrap youremail"><input type="email" name="youremail" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="Enter your email" /></span> </p>
<p><span class="wpcf7-form-control-wrap yoursubject"><input type="text" name="yoursubject" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Phone number" /></span></p>
<p class="wt_form_text">We will never spam you, or sell your email to third parties. All fields are required</p>
<p><input type="submit" value="Register Now" class="thankyou.php" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div>
</div>
</div>
</div>
</div>
</div></div></div></div><div class="wt-row-container"><div class="vc_row wpb_row vc_row-fluid " >
<div class="vc_col-sm-12 vc_hidden-md vc_hidden-sm vc_hidden-xs wpb_column vc_column_container">
<div class="wt_wpb_wrapper clearfix" >
<div id="wt_spacer_sc-37804" class="wt_spacer_sc wt_clearboth" style="height:140px; line-height:140px;"></div>
</div>
</div>
</div></div><div class="wt-row-container"><div class="vc_row wpb_row vc_row-fluid " >
<div class="vc_col-sm-12 wpb_column vc_column_container">
<div class="wt_wpb_wrapper clearfix" >
</div>
</div>
</div></div>
</div>
</div>
</div>
</section>
答案 0 :(得分：0)
响应根据浏览器大小调整图像大小。确保IMG的大小以相对单位而不是像素大小为单位。最常见的相对解决方案是将图像的最大宽度设置为100％：
<img src="http://thenutritioncoachuk.com/24FitClub/wp-content/uploads/2015/06/logo24.png" alt="DESCRIPTION" />
img {
max-width: 100%;
height: auto;
}
这是完成您所寻找内容的最简单方法。虽然，还有其他方法。我看不到任何灰色条？