html - 我正在尝试调整我的 img 大小以适合我的导航栏上方,所以它不是那么大?
问题描述
所以首先我在做 freecodecamp,这是我正在使用的 Pen https://codepen.io/chrisalta94/pen/JwdBEq
如您所见,图像及其周围的空间太大,如何减小尺寸以使其看起来更好,如果有人知道如何使其具有响应性?
CSS
#header-img {
display: flex;
height: 100%;
background:black;
}
img {
max-width: 100%;
max-height: 100vh;
margin: auto;
}
解决方案
You need to add a height attribute to your tag.
For example:
<img src="https://i.pinimg.com/originals/73/fb/7f/73fb7fb7b9cd1833e16bb4fcef17a962.png"
alt="Adidas Logo" height="200">
This way you can choose a particular height that works for you.
As for making it responsive, this is usually done by setting several media queries at different widths, that change the design when it breaks down. So this usually includes a lot of experimenting with when the design starts to break down.
Alternatively, what I often find just as effective and much simpler, is using the orientation: portrait
media query, like so:
@media (orientation: portrait) {
/* CSS that needs to change here */
}
This will change the specific CSS on every viewport in portrait orientation. This includes phones and tablets for example, but also desktop browsers windows that are resized to a portrait orientation!
推荐阅读
- javascript - Express.js : 获取同源 iframe 的 req.body.datas
- python - 无法使用 python 和 selenium 在网站中上传文件
- eclipse - Eclipse Che 的 Eclipse BPMN 2.0 建模器插件
- javascript - 通过for循环增加数组只保留最后一个对象?
- javascript - 如何通过 JavaScript UMD 加载 React 组件?
- android - 布局权重不起作用
- python - Python - 比较 2 个二维字典
- android - 从 json 文件中读取、写入、删除特定文本
- websphere-8 - 项目和默认服务器 jar 之间的 Websphere 8.5 重叠 jar
- c++ - 使用 cmake 单独编译和链接 CUDA C++ 设备代码