Question

我想将1/3较大的图像放入较小的div中，矩形居中，但我不知道如何填写。

这是一个例子： jsfiddle

HTML：

public class MainFragment extends Fragment {

    private TextView mTextDetails;
    private CallbackManager mCallbackManager;
    private FacebookCallback<LoginResult> mCallback = new FacebookCallback<LoginResult>() {
        @Override
        public void onSuccess(LoginResult loginResult) { // The thing you want to do when you got permission
            AccessToken accessToken = loginResult.getAccessToken();
            Profile profile = Profile.getCurrentProfile();
            if(profile != null){
                mTextDetails.setText("Welcome " + profile.getName());
            }
        }

        @Override
        public void onCancel() {

        }

        @Override
        public void onError(FacebookException error) {

        }
    };

    public MainFragment() {
        // Required empty public constructor
    }

    public void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        FacebookSdk.sdkInitialize(getActivity().getApplicationContext());
        mCallbackManager = CallbackManager.Factory.create();

    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_main, container, false);
        mTextDetails = (TextView)view.findViewById(R.id.text_details);
        LoginButton loginButton = (LoginButton)view.findViewById(R.id.login_button);
        loginButton.setReadPermissions("user_friends");//Only ask if you must
        loginButton.setFragment(this);
        loginButton.registerCallback(mCallbackManager, mCallback);


        return view;
    }

    public void onActivityResult(int requestCode, int resultCode, Intent data){
        super.onActivityResult(requestCode, resultCode, data);
        mCallbackManager.onActivityResult(requestCode,resultCode, data);

    }

}

CSS：

<div class='outer'>
   <img src='http://www.clker.com/cliparts/3/R/3/7/W/R/orange-vertical-rectangle-hi.png' />
</div>

我只想将橙色矩形的上1/3放入外部div中，并隐藏其余的矩形。在我的例子中，我将背景颜色放在外部div以便于识别。

Answer 1

仅在img类中删除position: absolute;

更新css

img{
  z-index : -1;
  margin-left : -25%;
}

现场演示 Here

下面的代码段示例

＆＃13;

*{
  margin : 0;
  padding : 0;
}
body{
  background-color: grey;
}
.outer{
  width : 200px;
  height : 200px;
  overflow : hidden;
  border-radius : 50%;
  background-color : black;
  margin : auto;
}
img{
  z-index : -1;
  margin-left : -25%;
}

＆＃13;

<div class='outer'>
   <img src='http://www.clker.com/cliparts/3/R/3/7/W/R/orange-vertical-rectangle-hi.png' />
</div>

＆＃13;

如何将较大的图像填充到较小的div中？

1 个答案: