使用CSS左上对齐单个图像

Question

I am trying to upload an image on our webpage ( https://www.palousebicycle.org/team.html ) so that the person's face isn't cut off, while keeping the others the same (it is the last image).

I tried inline html:

 #staff2 { border: 10px solid white; width: 45%; min-width: 250px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .staff img { border-radius: 50%; width: 228px; height: 228px; object-fit: cover; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .staff figure { display: inline-block; padding: 30px 40px; text-align: center; } #nick { position: absolute; top: -30px; left: -30px; align: top, left; } 

 <img "#nick" src="pictures/nick.jpg" alt="Nick" align="left,top"> 

as well as assigning an image #id (#nick) and using the CSS properties "align", "left", and "top".

I also tried using a frame on the picture to move it top-left, but I couldn't get the image in the right place to not show the frame.

We are a small nonprofit, and it's been awhile since I wrote the webpage, so forgive me for being a bit rusty, and probably not asking the question correctly. Please let me know any other information or files I can post, and thank you so much for any help! I really appreciate your time and assistance!

Answer 1

I would first suggest that you simply crop the image to a 228px by 228px square with the person centered appropriately in the image. That would give you the most control in terms of the way the image is cropped.

If you want to do it with css, you can do something like this:

 #nick { background-image: url(https://www.palousebicycle.org/pictures/nick.jpg); background-size: 300%; border-radius: 50%; width: 228px; height: 228px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } 

 <div id="nick"></div> 

Displaying the image with the background-image css property instead of with html <img> tag allows you to better control the way it is cropped. In this case, I just added a background-size: 300% which sized the background appropriately to fit the face in the circle.

Answer 2

也许您必须在img组件中将（“ #nick”）替换为（id =“ nick”）。