bootstrap图像在容器中调整大小到屏幕大小

Question

我有一个引导程序页面，它为我提供了调整位置以适应屏幕尺寸的图块。这一切都很好，但我有一个问题，即将图像与其他项目一起添加到图块。 下面的脚本是我的问题的一个例子。第一个图块的图像显示在复选框和标题下方。由于此复选框和标题，图像位于面板外一半。在第二个面板上，我只有图像，并在面板中完美调整大小并调整到所有屏幕尺寸。 我已经尝试使用CSS来指定图像的高度，但这并不适用于所有屏幕尺寸。如果我说高度：50％然后它适合大屏幕面板，但在小屏幕上弹出底部。 有没有解决的办法。我可以在CSS中指定所有常见屏幕尺寸的图像大小。

HTML脚本

#User types in a word
word = input("Type in a word: ")

#initiate the dictionary struct.
dictionary = {}
#run through the dictionary file, one line at a time.
with open("dict.txt") as dict_filehandle:
for cword in dict_filehandle:
#here a single line has been placed into the variable cword.

    #no newlines are allowed in the words.
    cword=cword.replace("\n","");

    #give the given word the value 1.
    dictionary[cword]=1;

#here we have a dictionary struct.

#here we push through all the words in the dictionary


print(dictionary["house"])

Answer 1

您在第二张图片上忘记了class="img-responsive"，还是故意这样做了？

您应该查看Bootstrap Media Queries

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }