个人中心
gpt4 book ai didi

html - 仅使用 CSS 基于窗口调整图像大小时的空白

转载 作者：太空宇宙 更新时间：2023-11-04 06:10:25 24 4
gpt4 key购买 nike

在构建我的网站时，我访问了 Resizing Image Based on Browser Width/Height页面尝试创建一个图像，该图像会根据窗口的大小自行调整大小。它目前适用于大多数显示器，但当显示器超过大约 16 英寸时，右侧会出现大部分空白。

我该如何消除这个空白？

这是我的 HTML/CSS:

* {
	font-family: "Big Caslon","Book Antiqua","Palatino Linotype",Georgia,serif;


}

p {
	padding: 1em 2em;
	font-size: 1.3rem;

}

h2 {
	font-size: 3em;
	margin-left: 1em !important;
}

.main-title h1 {
 font-size: 4em;
}

.main-title h3 {
	font-size: 2em;
} 

.post-hero-image {
    max-width: 100%;
    height: auto;
    width: auto; /*  Internet Explorer */


}

.content img {
	max-width: 50%;
	height: auto;
	width: auto;
	margin: 2em 25%;
}

.main-title {
	font-size: 120%;
	text-align: center;
	font-weight: 800;
	margin: 2em 5em;
}

ol li {
	font-size: 1.5em;
	margin-left: 2em;
}

.content div {
	margin-left: 3em;
}
<!DOCTYPE html>
<html>
	
<head> 
	<link href="header+footer.css" rel = "stylesheet" type="text/css" />
	<link href="the-10x-rule-style.css" rel = "stylesheet" type="text/css" media="screen"/>
	 <meta charset="utf-8">
	<title> The 10X Rule - The Novel Column </title>

</head>
	

<body>

<nav>

	<h1> <a href="index.html"> The Novel Column </a> </h1>

	<ul>
		<li> <a href="#"> Resources </a>
			<ul> 
				<li> <a href="#"> Book Reviews </a> </li>
				<li> <a href="#"> Quotes and Principles </a> </li>
				<li> <a href="#"> Community Aid </a> </li>
				
			</ul>
		</li>
		<li> <a href="#"> About Us </a> </li>
	</ul>
	
</nav>


<img src="https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X-Rule-Image-2-e1555476700855.jpg" alt="The 10X Rule" class="post-hero-image">


<div class="main-title">
<h1> The 10X Rule</h1>
<h3 class="author"> Grant Cardone</h3>
</div>

<div class="content">

	

		<p> I first heard about Grant Cardone and his work on Youtube. In one of his videos, he briefly talked about how one of his books, <span style="text-decoration: underline;">The 10X Rule</span>, caused him to organize one of the largest personal growth and business conferences in the entire world. As I picked up this primer to massive action, I thought, <i> “This must be interesting!” </i> </p>



	<img class="infographic" src="https://thenovelcolumn.com/wp-content/uploads/2019/05/The-10X-Rule-Infographic.png">

	<h2>What is the 10X Rule?</h2>

		<div class="about-book">

		<ol>
 		<li><b> Set goals and targets that are 10X higher than what you believe you can achieve.</b></li>
			<p class="goals_intro"> Grant believes that it is imperative for us to set goals higher than what you believe you can achieve. If your goal is to close 5 customers every week, convince 50 customers that your product provides them the best value. If you want to get one article written every week, try getting one polished article every day. Your 10X goal doesn’t necessarily need to be exactly 10 times more than what you expect; 4, 3, or even 2 times more is acceptable. The main idea is to attempt to maximize your potential.</p>

			<p class="goals_why">Why should we do this? If we don’t set high goals for ourselves, we actually work below our expected level of work ethic (since not high goal = easy to achieve). However, when we set a challenging goal for ourselves, we know that our standard work level is not high enough for success. Due to the difficulty of the target, we will naturally raise our level of work habits to a higher standard than before. This in turn allows us to reach our original goal or even exceed it.</p>

			<p class="goals_example">I absolutely agree with this principle. When reading the section of The 10X Rule regarding this topic, I was preparing for a computing contest (similar to a hackathon). The average score was in the 40 – 50 range with the highest score being 75 (a perfect score). At first, I told myself that getting a 60/75, a fairly competitive score, was enough. However, I remembered Grant’s advice and raised my goal to 70 or more. Reflecting back on that decision, I realized that raising my goal motivated me to wake up early in the morning to complete a practice contest every day (each one took approximately 3 hours).</p>

			<p class="goals_conflict">During this process, there were times 	where difficult problems caused me to ask myself, “Is this truly necessary?” “Do I really need a 70?” In this situation, Grant would list his goals out on a notepad so that he put his main focus on the end goal he wants to achieve, not so much in the problem at hand. This is exactly what I did. I grabbed my journal and wrote, “I have a score of 70 or more on the CCC contest” (it is important to write your goal as if you already accomplished it). I then added some further detail on the steps I would take to achieve this objective.</p>

			<p class="goals_conclusion">Even though I ended up with a score of 60 in the end, the 10X actions that came as a result of the revised goal were what got me to my original target. If I stuck to my original goal, I may have got an even lower score!</p>

 		<li><b>Take actions that are 10X greater than what you expect you need to take.</b></li>
			<p class="10x_actions">Not doing this plays a key part in why many people give up on completing a certain task. Since this is my first review, take creating a website as an example. Before setting up The Novel Column, I was fairly overconfident and only listed out two possible problems I would encounter. As I was designing my pages and creating the content, I found more than 20 problems that needed to be dealt with. As I spent three hours trying to find an answer in vain, I remembered this part of the rule and how I directly violated it by not spending enough time pondering the possible problems I would encounter and how I would tackle them. Due to this, I went back to the drawing board, thought about 30 design and content problems I may encounter, and found a detailed and specific answer to each one of them. By doing so, I mentally prepared myself for more problems along the way and will therefore be less susceptible to quitting when encountering them.</p>

	</ol>
</div>



<a data-cp-link="1" href="#" target="_self" rel="noopener noreferrer"><img class="good-size" src="https://i1.wp.com/thenovelcolumn.com/wp-content/uploads/2019/04/6692944548b24ec5a2dfd3d09c1ca97-e1555886155678.jpg?zoom=2.5&amp;w=3840&amp;ssl=1" "="" i1.wp.com="" thenovelcolumn.com="" wp-content="" uploads="" 2019="" 04="" 6692944548b24ec5a2dfd3d09c1ca97-e1555886155678.jpg?zoom="2&amp;w=3840&amp;ssl=1&quot;" width="563" height="393" src-orig="https://i1.wp.com/thenovelcolumn.com/wp-content/uploads/2019/04/6692944548b24ec5a2dfd3d09c1ca97-e1555886155678.jpg?w=3840&amp;ssl=1" scale="2.5"></a>

<h2> The ONE Takeaway:</h2>
<div id="one-message">
	
	<p class="the-takeaway"> Massive success is only achieved through massive action.</p>

</div>

<h2>Main Takeaways</h2>
<div id="takeaways">
	
	
	<ol>
 		<li><b>Don’t Compete With Others</b></li>
			<p class="dont_compete"> When you compete with others, you are restricting yourself from achieving massive results. Think about it: you are telling yourself that you simply need to be better than your competition. In other words, your competition dictates your work ethic. Thus, the 10X Rule is directly violated since you are not even attempting to achieve your full potential. For example, what if the competition is offering sub-par services? Based on Grant’s analysis, you simply have to develop your product or service until yours is at their level or a little bit better to beat them. This means that your service is also sub-par (or maybe a little bit better). Are you making an effort to reach your (company’s) potential? Definitely not. Instead, Grant suggests delivering so much value to your clients through your product and service that you will obliterate all competition. This will help you dominate the sector you are in.</p>

 		<li><b>Successful People take Massive Action</b></li>
			<p class="massive_action_focus">Grant tells us that ordinary people approach a task and simply quit when it gets too difficult (or when they realize that the difficulty of completing the task is higher than what they expected). Even then, they are self-satisfied and tell themselves that the attempt is good enough. However, Grant tells us that an attempt without an intended result is the exact same thing as not accomplishing anything at all. If you meet hardships, the author suggests persisting and continuing to take massive action to overcome them and reach the end result (focusing on the goal and not the process).</p>

			<p class="massive_action_four_degrees">There are four degrees of actions. Many average people fit inside the first three. They aren’t happy with their 9-5 job but don’t find a way to change for the better. However, successful people take the last degree: massive action. They do everything then can to improving their skill, dominate their sector (instead of competing with others), and reach their maximum potential. This is done by reading an average of 60 books and attending an average of 3 seminars and/or webinars every year.</p>

			<p class="massive_action_no_bounds">The successful also know that their energy, creativity, and effort have no bounds. Take one of Aesop’s fables, <u>The Tortoise and the Hare</u>, for example. In this short parable, the hare is portrayed as a fast but cocky individual and the tortoise as slow but steadfast. Due to the hare’s lack of action, the tortoise wins in end, causing most readers to infer that the slow and perseverant will always beat the skilled but arrogant. However, if there was an individual who had the speed of the hare and the steadfastness of the tortoise, it would crush both animals and have no competition. Grant’s advice here is to take attributes from both animals; we not only want to take massive actions and maintain motivation but also posess continued persistence. This helps us become the best in whatever sector we are in.</p>

 		<li><b>Average is a Failing Formula</b></li>
			<p class="average_failing_intro"> Ordinary, standard, and usual. These are the first three words that come up when we google synonyms for the word “average”. Thinking and doing the typical way will stop many dreams from becoming a reality. This is due to two reasons: average thoughts and average actions.</p>

			<p class:="average_failing_starbucks">During the troubling economic times in 2008, Starbucks could be seen as the best example for anything but average action. Not only were they doing what other companies in their and sector were (cutting expenses and removing unprofitable locations), Starbucks CEO Howard Schultz would travel to different locations around the US and ask customers on how his company could better serve them. It was most likely these massive actions and improvements to the company that got the attention of investors and customers and caused Starbucks to be one of the biggest coffee companies in the world.</p>

			<p class="average_failing_company">Average also assumes that everything will work as intended. These consequences can be seen in many startup companies. For example, members of a startup decide to “play it safe” and present their product to 5 people (potential buyer or investor). They think that 10 calls is simply enough. However, what if none of the 10 people they called have time or interest in learning about your product? Even the most successful products may need 100 calls to gather 10 people. Along with other negative setbacks (competition dominating the startup’s sector, a key member in an accident), these average thoughts and actions this startup took will cause many members may be overwhelmed (since these possibilities were never considered) and even result in the majority of them leaving.</p>

			<p class="average_failing_conclusion"> Will ordinary results appeal to potential clients? Will standard results help us dominate our sector? Will typical actions and thoughts propel your product or service to high levels of success? Definitely not! It is due to these reasons that Grant finds it critical to eliminate the notion of average in our minds if we want massive results.</p>
		</ol>
</div>

<img class="good-size" src="https://i1.wp.com/thenovelcolumn.com/wp-content/uploads/2019/04/cd45503f6ff3529bfcfc10e3924f18a-e1555886172469.jpg?zoom=2.5&amp;w=3840&amp;ssl=1" alt="" title="Highlighted Page" width="563" height="393" src-orig="https://i1.wp.com/thenovelcolumn.com/wp-content/uploads/2019/04/cd45503f6ff3529bfcfc10e3924f18a-e1555886172469.jpg?w=3840&amp;ssl=1" scale="2.5">

<h2> Personal Opinions</h2>

<div class="opinions">
	<p class="opinions-intro">For starters, this book is very easy to understand. I love how Grant only focuses on <b>one or two</b> important points of information in each chapter, use multiple examples in the real world, and repeating his idea and his supporting points multiple times in the chapter. These small things allowed me to clearly understand what his points and principles are and why they are true while the reiterations allowed the information to stick in my head.</p>

	<p class="successful-vs-unsuccessful">I especially love the <u> Successful or Unsuccessful</u> section of the book. It is here where Grant talks about his findings on the common traits of successful people. There are some examples which can be found in other books, such as persistence, having a “can-do” attitude, and being goal oriented. However, there are also many that are unique to <u> The 10X Rule </u> itself, such as being highly ethical, being uncomfortable, and committing first – figure out later (my personal favorite). To me, this section is worth more than the price of the book itself!</p>

	<p class="minor-issues">Even with these important facts, there are some minor issues I have with <u> The 10X Rule</u>. First, the repetition of an idea over and over again through 7 – 10 pages. If I was not highlighting important points in the book (which was something not done for the first 100 pages), it was easy for me to doze off and lose engagement in Grant’s information. It would have also been better if there were some sort of pictures or diagrams instead of simply a page filled with words. This would have allowed Grant to elaborate on his points without using so much text, giving any reader’s attention span some leeway.</p>

</div>

<div class="conclusion">

	<p>Along with many important non-conventional principles successful people abide by, <u> The 10X Rule </u> showed me why many habits of the majority of society don’t allow for massive success and what high achievers do to get the success they have.</p>

	<p> Due to this, I give this book a <b> 7.5 </b>.</p>

</div>

<img class="infographic" src="https://thenovelcolumn.com/wp-content/uploads/2019/05/The-10X-Rule-Infographic.png">

</div>



</div>

</body>




</html>

提前感谢您的帮助!

最佳答案

尝试将 min-width: 100%; 添加到 CSS 中的 .post-hero-image 类。这将允许它填充页面的整个宽度，即使图像分辨率小于窗口宽度也是如此。

关于html - 仅使用 CSS 基于窗口调整图像大小时的空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56482154/

24 4 0
文章推荐： java - 强制 Solr 在搜索期间不使用 _version_ 字段
文章推荐： Python Sympy 打印差异化的用户定义复合函数；如何切换替换
文章推荐： python - 将 BlobKey 存储在模型中
文章推荐： html - 如何使我的内容在水平和垂直方向上响应屏幕尺寸？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com