Question

这就是我现在所拥有的：

只有当照片分辨率很高且主要是风景时，它看起来才不错。

这是我的HTML和CSS：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
	<!--<div class="preloader"></div>-->

	<div class="menuIcon" id="profile"></div>
	<div class="menuIcon" id="cv"></div>
	<div class="menuIcon" id="work"></div>
	<div class="menuIcon" id="contact"></div>

	<div class="frame rightFrame" id="right"></div>
	<div class="frame leftFrame" id="left"></div>
	<div class="frame topFrame" id="top"></div>
	<div class="frame bottomFrame" id="bottom"></div>

	<div class="pageCont home">
	<div class="centre-div">
		<img class="profile-pic" src="img/me_1@2x.png">
		<h2 class="home">Hi, I'm Gavin.</h2>
		<p class="home">
		A graphic and UX designer with excellent communication and design skills with a proven record of delivering creative and innovative design solutions. Welcome to my online Portfolio. 
		</p>
		<p class="home">
		I have passion for both digital and print design, with a forward-thinking mentality and innovative spark. Please feel free to have a <a>look around</a> and <a>say hello</a>. 
		</p>
	</div>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="js/gavinfriel.js" type="text/javascript"></script>
</body>

<div class="upload-thumb ng-scope visible">
    <span class="delete-media">
      <span class="icon-bin">
        </span>
    </span>
    <img src="">
</div>

如果我删除固定高度，这就是它的样子：

照片没有缩放，但我希望它们不会缩放并放在固定大小的容器中，就像在我的第一个屏幕中一样。我知道图像的一部分可能会被切割，但我知道这一点。如何做到这一点？

Answer 1

你可以用css overflow：hidden来做到这一点。设置要在图像宽度上缩放的尺寸，以及要在隐藏溢出的包含div上裁剪的尺寸：Plunkr：https://plnkr.co/edit/AzoaVufPDioGHQHk4RhG?p=preview

CSS

.tmb {
  width: 200px;
  overflow: hidden;
 }
 .tmb img {
  height: 100px;
 }

HTML：

<div class="tmb">
  <img src="https://www.w3schools.com/css/trolltunga.jpg" />
</div>

您的另一个选择是使用背景图像和定位/大小调整。

看到这篇文章，它很好地解释了这两种方法： How to automatically crop and center an image

如何正确显示各种尺寸的缩略图？

1 个答案: