如果是容器，则将图像对齐在中心

Question

我添加了比viewport更宽的图片我看起来，在某处1000px宽，我希望它能以某种方式在中间对齐..

较小的眼睛下方需要照原样。

我玩transform: translate(-50%,-50%);并对齐属性和margin: -50%，但我想我需要使用媒体查询..

这是我的博客：

http://blog.mk-dizajn.com/

感谢您的帮助..

Answer 1

只需将此规则添加到您的图片中，它就会缩放到您的视口

<强> CSS

img {
    max-width:100%;
    height:auto;
}

但是你应该确定你的图像标签上没有宽度和高度属性

Answer 2

将宽度=“100％”添加到img标记。

<img src="http://blog.mk-dizajn.com/media/left_right_side_of_brain-1280x768.jpg" width="100%" alt="Are you right, or left :)">

请参阅http://jsfiddle.net/9nMzK/

Answer 3

试试这个：

<div id="image_container">
     <img src="picture.png">
</div>

然后添加这个CSS：

#image_container {
   position: absolute;  /* Alternative get this relative to the parent */
   left: 0;
   width: 100%;
   padding-left: 50%;
   display: block;
   float: left;
   clear: both;
}
#image_container:after {
   clear: both;
}
#image_container > img {
   margin-left: -50%;
}

说明：您为父容器提供了50％的填充。为了使图像动态居中，给图像留下-50％的边距;这样你就可以集中注意力。

Answer 4

为图片代码指定宽度为100％。将此代码替换为可行

img {
display: block;
margin: 0 0 1rem;
border-radius: 5px;
width: 100%;
}

Answer 5

您需要添加代码css

img {
    max-width:100%;
    height:auto;
}

此技术可在您更改屏幕尺寸时调整图像大小